Vue ＜transition＞使用JS过渡的loading动画小案例

<!-- Vue <transition>使用JS过渡的loading动画小案例 -->

<template>
  <div class="page">
    <button @click="show = !show">Start</button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
    >
      <p class="loading" v-if="show">加载中</p>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        show: false
      }
    },
    methods: {
      beforeEnter(el){
        el.style.opacity = 0;
        el.style.transform = 'translateY(-50px)';
      },
      enter(el, done){
        Velocity(el, {opacity: 1, translateY: '50px'});
        Velocity(el, {rotateZ: '360deg'},{loop: true, duration: 1000}, {complete: done})
      },
      leave(el, done){
        Velocity(el, {opacity: 0, rotateZ: '360deg', scale: '2'}, {complete: done});
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.loading {
  width: 50px; height: 50px;
  text-align: center; line-height: 50px;
  border-radius: 50%;
  background-color: rgba(191, 221, 255, 0.26);
  border: 1px dashed #6aa3ee;
  outline: 1px dashed #6aa3ee;
  outline-offset: 3px;
  font-size: 12px;
  color: #6aa3ee;
}

</style>

// 在main.js中全局引入velocity.min.js
// Velocity 和 jQuery.animate 的工作方式类似，也是用来实现 JavaScript 动画的一个很棒的选择
// https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js
/*
* Velocity中文文档
* http://shouce.jb51.net/velocity/index.html
* */
import '@/assets/js/velocity.min.js'