Vue.js学习开发五-----Vue动画

5-1.Vue 中Css动画原理:  过渡动画效果
<transition></transition>未开始时候添加两个CSS类。给起的名字name="fade"
.fade-enter  动画第二帧就移除
.fade-enter-active，动画结束时移除
代码如下：代码为执行时的一瞬间。
<style>
	.v-enter,.v-leave-to{
		opacity: 0;
	}
	.v-enter-active,.v-leave-active{
		transition:opacity 1s;
	}
</style>
<body>
  <div id="root">
  	<transition >
  	<div v-if="show">helloword</div>
  	</transition>
  	<button @click="handleClick">切换</button>
  	
  </div>
  <script>
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			}
  		}
  	})
  </script>
	
5-2.使用animate.css库

前提利用@keyframe实现放大缩小，同时可以使用自定义的类，如下.active,和.leave,
所以我们也可以使用animate.css的库。
@keyframes  bounce-in{
		0% {
			transform: scale(0);
		}
		50% {
			transform: scale(1.5);
		}
		100% {
			transform: scale(1);
		}
		
	}
		.active{
			transform-origin: left center;
			animation: bounce-in 1s;
		}
		.leave{
		    transform-origin: left center;
		    animation: bounce-in 1s reverse;
		}
		
		
	</style>
<body>
  <div id="root">
  	<transition 
  		name="fade"
  		enter-active-class="active"
  		leave-active-class="leave">
  	<div v-if="show">helloword</div>
  	</transition>
  	<button @click="handleClick">切换</button>
  	
  </div>
  <script>
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			}
  		}
  	})
  </script>


animate.css库：
 自定义的Css 中的Class

<div id="root">
  	<transition 
  		name="fade"
  		appear
  		enter-active-class="animated shake"
  		leave-active-class="animated bounceOut"
  		appear-active-class="animated swing"
  		>
  	<div v-if="show">helloword</div>
  	</transition>
  	<button @click="handleClick">切换</button>
  	
  </div>
  <script>
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			}
  		}
  	})
  </script>


5-3在Vue中使用过度和动画
   

<style>
	.fade-enter,.fade-leave-to{
		opacity: 0;
	}
	.fade-enter-active,.fade-leave-active{
		transition:opacity 3s;
	}
</style>

  <div id="root">
  	<transition 
  		:duration="{enter:5000,leave:10000}"
  		name="fade"
  		appear
  		enter-active-class="animated shake fade-enter-active"
  		leave-active-class="animated bounceOut fade-leave-active"
  		appear-active-class="animated swing"
  		>
  	<div v-if="show">helloword</div>
  	</transition>
  	<button @click="handleClick">切换</button>
  	
  </div>
  <script>
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			}
  		}
  	})
  </script>

5-4Vue中的js动画，Velocity
 入场动画js钩子：出场动画钩子，响应改为leave就好。

<div id="root">
  	<transition 
  		name="fade"
  		@before-enter="handleBeforeEnter"
  		@enter="handleEnter"
  		@after-enter="handleAfterEnter"
  		>	
  	<div v-if="show">helloword</div>
  	</transition>
  	<button @click="handleClick">toggle</button>
  	
  </div>
  <script>
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			},
  			handleBeforeEnter:function(el){
  				el.style.color='red';
  				//接收el参数
  			},
  			handleEnter:function(el,done){
  				//beforeEnter结束后.
  			   setTimeout(()=>{
  				 el.style.color='green';
  				
  			    },2000)
  			    setTimeout(()=>{
  			    done();
  				},4000)
  			   
  			},
  			handleAfterEnter:function (el){
  				el.style.color='#000';
  			}
  		}
  	})
  </script>

Velocity的应用,需要在duration:1000,1秒后，添加done()，调动after-enter

body>
  <div id="root">
  	<transition 
  		name="fade"
  		@before-enter="handleBeforeEnter"
  		@enter="handleEnter"
  		@after-enter="handleAfterEnter"
  		>	
  	<div v-if="show">helloword</div>
  	</transition>
  	<button @click="handleClick">toggle</button>
  	
  </div>
  <script>
  	var vm=new Vue({
  		el:"#root",
  		data:{
  			show:true
  		},
  		methods:{
  			handleClick:function(){
  				this.show= !this.show
  			},
  			handleBeforeEnter:function(el){
  				el.style.opacity = 0
  				//接收el参数
  			},
  			handleEnter:function(el,done){
  				//beforeEnter结束后.
  			  Velocity(el,
  			  	{opacity:1},
  			  	{ 
  			  		duration:1000,
  			  		complete:done
  			  	})
  			   
  			},
  			handleAfterEnter:function (el){
  				el.style.color='red';
  			}
  		}
  	})
  </script>
</body>
Vue.js学习开发五-----Vue动画

猜你喜欢
