vue学习（8）-过渡transition&动画animate

 

进入之前                                                    离开之后

v-enter---v-enter-to            v-leave-to---v-leave    时间点

    v-enter-active                        v-leave-active    时间段

 

一，

<transition name="my">    //修改前缀名

.v-enter-active{

transiton:all .8s ease

}

.my-enter{

transform:translateX(80px);

opacity:0;

}

 

二，

第三方animate.css

<link>

入场bounceIn

离场bounceOut

<transition enter-active-class="animated bounceIn">   //一定要写animated

:duration="{enter :500,leave:0}"//持续时间 毫秒

 

三，

半场动画

<transition @before-enter="beforeEnter">

methods:{

beforeEnter(el){ 

   

},

enter(el,done)

    offsetHeight//触发刷新

    ...

    done

}

 

四，

v-for :key

<transition-group>