Vue过渡：用Velocity实现JavaScript钩子

 

Velocity is an animation engine with a similar API to jQuery's $.animate(). It has no dependencies, but will happily extend jQuery, Zepto, and even the native DOM. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling.

 

一 安装依赖

 

npm install velocity-animate  (这里是1.5.2版本)

文档地址：https://github.com/julianshapiro/velocity/wiki

 

二 App.vue

 

<!-- App.vue -->
<template>
  <div id="app">
    <button @click="show = !show">按钮</button>
    <transition 
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <p v-if="show">芒果</p>
    </transition>
  </div>
</template>

<script>
import Vue from "vue";
import Velocity from "velocity-animate";

export default {
  name: "app",
  data() {
    return {
      show: false
    };
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
      el.style.transformOrigin = "left";
    },
    enter(el, done) {
      // 动画队列
      Velocity(el, { opacity: 1, scale: 1.2 }, { duration: 300 });
      Velocity(el, { scale: 1 }, { complete: done });
    },
    leave(el, done) {
      // 动画队列
      Velocity(el, { translateX: "15px", rotateZ: "50deg" }, { duration: 600 });
      Velocity(el, { rotateZ: "100deg" }, { loop: 2 });
      Velocity(
        el,
        {
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0
        },
        { complete: done }
      );
    }
  }
};
</script>

<style>
</style>

 

三 运行效果