vue2+velocity动画学习笔记（1）：引入velocity

引子

听说Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库，最近正好学习一下怎么在vue中使用，用的vue2。

安装velocity-animate

npm install velocity-animate

引用

import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui.js'
Vue.prototype.Velocity = Velocity

使用示例1

结合vue的transition动画使用

template中：

<button @click="show = !show" class="btn btn-primary" style="margin-left: 30px;">{{ btnText }}</button>
<transition name="staggered-fade" v-bind:css="false" v-on:before-enter="beforeEnter"
  v-on:enter="enter" v-on:leave="leave">
  <ul v-show="show">
    <li class="app-li" v-for="item in list" :key="item.id">{{ item.msg }}
    </li>
  </ul>
</transition>

或者动画组

<button @click="show = !show" class="btn btn-primary" style="margin-left: 30px;">{{ btnText }}</button>
<transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter"
  v-on:enter="enter" v-on:leave="leave">
  <li class="app-li" v-show="show" v-for="item in list" :key="item.id">{{ item.msg }}
  </li>
</transition-group>

js中：

export default {
  name: 'Home',
  data() {
    return {
      show: true,
      btnText: "收起",
      list: [
        { id: '1', msg: 'java study' },
        { id: '2', msg: 'mysql study' },
        { id: '3', msg: 'html study' },
        { id: '4', msg: 'css study' },
        { id: '5', msg: 'js study' }
      ],
    }
  },
  methods: {
    beforeEnter(el) {
      console.log(el)
    },
    enter(el, done) {
      this.btnText = '收起'
      this.Velocity(
          el,
          'slideDown', // 内置动画，向下打开
          {
            complete: done
          }
        )
    },
    leave(el, done) {
      this.btnText = '打开'
      this.Velocity(
          el,
          'slideUp', // 内置动画，向上收起
          {
            complete: done
          }
        )
    }
  }
}

css简单写一下，随便：

.app-li {
  list-style: none;
  width: 200px;
  height: 30px;
  border-bottom: 1px solid #333;
}

示例2

直接使用

template：

<button @click="handleShow()" class="btn btn-primary" style="display:block;margin-left: 30px;">{{ btnText }}</button>
<ul>
  <li class="app-li" v-for="item in list" :key="item.id">{{ item.msg }}
  </li>
</ul>

js：只展示methods中的handleShow，其他部分如上面

handleShow(){
  this.show = !this.show
  this.Velocity(
    document.querySelectorAll('.app-li'),
    this.show ? 'slideDown' : 'slideUp',
    { stagger: 150 }
  )
}, 

感觉更简单了呢~

这个小笔记就简单记录这些吧，velocity的知识接着学习~