Vue-动画效果

1.vue中动画效果可以手写也可以通过插件实现，下面介绍一下两种方式的使用。

(1).手写
手写，需要自己写好样式

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

以上是使用css过渡时，所需要定义的类名，一般是使用v-enter-active, v-enter,
v-leave-active,v-leave-to.这四个类名。
v-是默认的前缀，可以自定义，如： fide-enter-active
使用时：

<transition  name='定义的名称'>
		//需要动画过渡的标签
</transition>
此处name属性就是过渡类名的前缀： fide

也可以使用javascript 钩子来进行动画展示：

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ...需要动画过渡的标签 -->
</transition>

/*vue组件中*/
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}


这些方法中el参数就是，transition标签所包裹着，需要动画过渡效果的标签。可以使用el对该标签直接进行样式操作。如下：
el.style.opacity=0;    //透明度设置为0

推荐使用插件实现。
2.使用官网推荐的animate 插件。
使用方法：

扫描二维码关注公众号，回复： 4740074 查看本文章

<transition   enter-active-class='animated 插件中的类名'     leave=active-class='animated  插件'>
	...
</transition>

这样就设置了，进入和离开的过渡动画了。

Vue-动画效果

Vue-动画效果

猜你喜欢