vue2中的过渡效果

首先，展示一下我们要实现的动画效果：

小球从右边边平移边旋转180到左边位置；

html结构：

小球是一个图标，是通过字体实现的，通过在i标签中添加相应的clss来实现；

  <div class="cart-decrease" >      <i class="icon-remove_circle_outline icon"></i>  </div>

应用动画的思路：

• 在整体cart－decrease上实现：
  transform3d（24px，0，0）—> transform3d（0，0，0）；
  opacity：0 —> opacity: 1;
• 在.icon标签上实现：
  rotate(180deg) —> rotate(0)

在整体元素最外层添加transition标签,并定义一个name属性

<transition name="move">  <div class="cart-decrease" >      <i class="icon-remove_circle_outline icon"></i>  </div></transition>  

接下来在style里写样式

.cart-decrease      display: inline-block      font-size: 0px      opacity: 1  //整体进入后透明度为1      .icon        display: inline-block        line-height: 24px        font-size: 24px        transition: all 0.8s ease        transform: rotate(0) //icon进入角度为0    .move-enter-active,.move-leave-active//小球进入，和离开过程的样式，transition: all .8s ease  只能应用到div.decrease上，不能继承到i.icon,所以需要另外在i.icon上写transition: all .8s ease        transition: all .8s ease      .move-enter,.move-leave-to      opacity: 0   //进入前和离开后整体的透明度      transform: translate3d(24px, 0, 0)      .icon        transform: rotate(180deg)// 进入前和离开后icon的旋转角度

其中

.move-enter-active,.move-leave-active  transition: all .8s ease 

可以删除，将transition: all .8s ease 添加到

.cart-decrease transition: all .8s ease

特别应该注意transition: all .8s ease属性没有继承属性，如果要嵌套过渡效果，即父子元素应用不同的过渡效果的时候，需要分别在父子两个元素上添加transition: all .8s ease

文档关于过渡的说明

有 6 个(CSS)类名在 enter/leave 的过渡中切换

• v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
• v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
• v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
• v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
• v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
• v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。
  

演示2：