vue中的动画

动画:

内部原理:借助css3做动画

transition     过渡动画

animation    祯动画

使用:

<transition name="slide">   name的属性值是自定义的

         <div></div>

</transition>

<transition-group name=""></transition-group>  多个的时候用,组

例如:

动画进入:三个状态

   进入前:   .slide-enter{ 写动画进入的初始样式 }

   进入过程中过:   .slide-enter-active{ 这里适合做过渡 transition:all .3s ease; //animation:名字 .4s;这两个二选一 }

  进入后:   .slide-enter-to{ 结束样式 }

动画离开:三个状态

   离开前:   .slide-leave{ 写动画进入的初始样式 }

   离开过程中:   .slide-leave-active{ 这里适合做过渡 }

   离开后:   .slide-leave-to{ 结束样式 }

也可以这样写:

     .slide-enter,.slide-leave-to{ 动画进入的初始状态  动画离开的结束状态}

     .slide-enter-active,.slide-leave-active{ 过程中  做transition过渡 transition:all .3s ease; }

     .slide-enter-to,.slide-leave{ 动画进入的结束状态 动画离开的初始状态 }