vue里面使用Velocity.js

https://github.com/julianshapiro/velocity

中文手册（教程）：http://www.mrfront.com/docs/velocity.js/

velocity.js 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被数以千计的公司使用在自己的项目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，这里Libscore.com 统计了哪些站点正使用 velocity.js。

Vue中如何使用：

安装 npm install velocity-animate@beta

页面引入： import Velocity from 'velocity-animate'

使用：

<template>
  <!--使用Velocity实现动画-->
  <div class="donghuagouzi">
    <transition
      name="fade"
      @before-enter="handleVeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-show="show">hello World</div>
    </transition>
    <button @click="handleClick">toggle</button>
  </div>
</template>

<script>
  import Velocity from 'velocity-animate'

  export default {
    name: 'donghuagouzi',
    data () {
      return {
        show: true
      }
    },
    methods: {
      handleClick: () => {
        this.show = !this.show
      },
      handleVeforeEnter: (el) => {
       el.style.opacity = 0
      },
      handleEnter: (el, done) => {
        Velocity(el, {
          opacity: 1
        }, {
          duration: 1000,
          complete: done
        })
      },
      handleAfterEnter: () => {
        console.log('动画结束')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

</style>

来源：oschina

链接：https://my.oschina.net/u/4361903/blog/4321970

标签

velocity

animate

jquery