Vue动画

简介

                        Enter                             Leave
                进入时候的动画             离开时候的动画
            v-enter v-enter-to                v-leave v-leave-to                        
              v-enter-active                      v-leave-active

这里不太清楚的可以参考下官方的API文档

示例代码

<style>
	/* 动画进入时的样式 */
	.v-enter,
	.v-leave-to{/* 动画离开时的样式 */
		opacity: 0;
		transform: translateX(200px);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all 0.4s ease;
	}

</style>
<div id="app">
	<!--需求，点击 h3显示-->
	<input type="button" value="toggle" @click="flag = !flag">
	<!--使用 transition元素，把需要被动画控制的元素包裹起来-->
	<!--自定义两组样式-->
	<transition>
		<h3 v-if="flag">这是一个H3</h3>
	</transition>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			flag: false
		},
		methods: {

		}
	});
</script>

 自定义V-前缀

<style>
	/* 动画进入时的样式 */
	.u-enter,
	.u-leave-to{/* 动画离开时的样式 */
		opacity: 0;
		transform: translateX(200px);
	}
	.u-enter-active,
	.u-leave-active{
		transition: all 0.4s ease;
	}

	 /* 动画进入时的样式 */
	.my-enter,
	.my-leave-to{/* 动画离开时的样式 */
		opacity: 0;
		transform: translateY(300px);
	}
	.my-enter-active,
	.my-leave-active{
		transition: all 0.8s ease;
	}
</style>
<div id="app">
	<!--需求，点击 h3显示-->
	<input type="button" value="toggle" @click="flag = !flag">
	<!--使用 transition元素，把需要被动画控制的元素包裹起来-->
	<!--自定义两组样式-->
	<transition name="u">
		<h3 v-if="flag">这是一个H3</h3>
	</transition>

	<hr>
	<input type="button" value="toggle2" @click="flag2 = !flag2">
	<!--使用 transition元素，把需要被动画控制的元素包裹起来-->
	<!--自定义两组样式-->
	<transition name="my">
		<h6 v-if="flag2">这是一个H6</h6>
	</transition>

</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			flag: false,
			flag2: false
		},
		methods: {

		}
	});
</script>	

Vue动画示例1

<style>
	.ball{
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: red;
	}
</style>
<div id="app">
	<input type="button" value="快到碗里来" @click="flag=!flag">
	<!--使用transition包裹元素-->
	<transition 
		@befor-enter="beforeEnter" 
		@enter="enter" 
		@after-enter="afterEnter">
		<div class="ball" v-show="flag"></div>
	</transition>
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			flag: false
		},
		methods: {
			//动画第一个参数el表示要执行动画的元素是个原生的Js dom对象
			//大家可以通过认为el是通过document获取到
			beforeEnter(el){//表示动画入场之前，此时动画尚未开始，可以设置元素开始动画之前的起始样式
				el.style.transform = "translate(0, 0)";//设置小球开始动画之前的起始位置
			},
			enter(el, done){//表示小球开始动画之后的样式
				el.offsetWidth;//没有实际作用，如果不写没有实际效果  强制动画刷新
				el.style.transform = "translate(150px, 450px)";//设置小球开始动画之前的起始位置
				el.style.transition = "all 1s ease";
				//动画完成之后，调用会立即消失 
				//这里也就是afterEnter函数的引用
				//如果不调用，那么就会产生延迟
				done();
			},
			afterEnter(el){//动画完成之后
				// console.log('ok');
				this.flag = !this.flag;
			}
		}
	});
</script>

Vue动画示例2

<style>
	li{
		border: 1px dashed #999;
		margin: 5px;
		line-height: 35px;
		padding-left: 5px;
		font-size: 12px;
		width: 100%;
	}
	li:hover{
		background-color: hotpink;
		transition: all 0.8s ease;
	}
	.v-enter,
	.v-leave-to{
		opacity: 0;
		transform: translateX(80px);
	}
	.v-enter-active,
	.v-leave-active{
		transition: all 0.6s ease;
	}
	/* 设置列表后续元素渐渐离开的效果 */
	.v-move{
		transition: all 0.6s ease;
	}
	.v-move-active{
		position: absolute;
	}
</style>
<div id="app">
	<div>
		<label>
			Id:
			<input type="text" v-model="id">
		</label>
		<label>
			Name:
			<input type="text" v-model="name">
		</label>
		<input type="text" value="添加" @click="add">
	</div>

	<!--实现列表过度的时候，使用transitionGroup实现-->
	<!--必须设置:key属性-->
	<!--appear属性实现入场时候的页面刚展示的时候的效果-->
	<!--通过tag属性，设置渲染后成为什么元素，如果不指定，默认渲染为span标签-->
	<!-- <ul> -->
		<transition-group appear tag="ul">
			<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
				{{ item.id }}-----{{ item.name }}
			</li>
		</transition-group>
	<!-- </ul> -->
</div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			id: '',
			name: '',
			list: [
				{id: 1, name:'赵高'},
				{id: 2, name:'秦桧'},
				{id: 3, name:'严嵩'},
			]
		},
		methods: {
			add(){
				this.list.push({id: this.id, name: this.name});
				this.id = this.name = '';
			},
			del(index){
				this.list.splice(index, 1);
			}
		}
	});
</script>