vue动画

1.动画

 <transition
    @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter"
  >
      <div class="ball" v-show="flag"></div>         

</transition>

var Vue=new Vue({
		el:"#app",
		data:{
			"flag":false

		},
		methods:{
                                           //使用方法使用动画
			 beforeEnter(el){
			 	el.style.transform="translate(0,0)";
			 },
			 enter(el,done){
                el.offsetWidth //强制开启动画
			 	el.style.transform="translate(150px,20px)";
			 	el.style.transition="all 1s ease";
			 	done()
			 },
			 afterEnter(el){
			 	this.flag=false;
			 }


		}



	});

2.淡入淡出 直接用

  .v-enter , .v-leave-to{
	        	/*进入和离开的动作*/
				opacity: 0;
				/*transform : opacity;*/
				transform : translateX(150px);
	        }
			.v-enter-active,.v-leave-active{

			    /*在这个过程中需要的变化效果*/
				
				transition : all 1s ease;


			}

3.在transition标签加上 name=“trans1”
后写类 trans1-leave-active trans1-enter-active

4.使用第三方类库 来使用动画(重要)

<transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{enter:200,leave:400}">
	<p v-if="flag" class="animated">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

      <br>
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
	</p>

</transition>	

5. <transition css="false"> //是否使用css