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>

三运行效果

Vue过渡：用Velocity实现JavaScript钩子

推荐阅读