Vue-Velocity动画过渡

详情可见

在VUE中切换路由没有任何动画效果，显得单调简陋，为了方便我们创建好看的动画效果
我们可以使用Velocity插件

1.安装Velocity

npm install velocity-animate

2.引入Velocity

import Velocity from 'velocity-animate'

3.使用Velocity

 <transition
      :css="false"
      @enter="enter"
      @leave="leave"
  >
  //需要执行动画的内容
  </transition>

  methods:{
      enter (el, done) {
        Velocity(el,  {opacity: 1}, { duration: 500 }, function () {
          done()
        })
      },
      leave (el,done) {
        Velocity(el, {opacity: 0}, { duration: 500 }, function () {
          done()
        })
      }
    }

4.使用Velocity自带的动画
动画名称可见
引入velocity.ui.js

import 'velocity-animate/velocity.ui'

    methods:{
      enter (el, done) {
        Velocity(el, 'slideInRight', { duration: 500 }, function () {
          done()
        })
      },
      leave (el,done) {
        Velocity(el, 'slideOutRight', { duration: 500 }, function () {
          done()
        })
      }
    }

注意点：不知道为什么根据文档的名称查找的动画名是不对的，应该是下载的Velocity的版本问题，如果报错的话，可以直接打开velocity.ui.js 自己查找需要的动画