Vue动画总结

Vue在插入、更新或者移除DOM时，可以应用过渡效果，让页面更丝滑。 包括以下工具：

• 在 CSS 过渡和动画中自动应用 class

• 可以配合使用第三方 CSS 动画库，如 Animate.css

• 在过渡钩子函数中使用 JavaScript 直接操作 DOM

• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

一、CSS过渡动画

过渡类名：

demo:

<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
        opacity: 0;
    }
</style>
<script>
	Vue.component('message', {
    props: ['show'],
    template: ` 
        <transition name='fade'>
            <div class="message-box" v-if="show"> 
                <strong><slot name="title"></slot></strong>
                <slot></slot> 
                <span class="message-box-close" 
                @click="$emit('update:show', false)">X</span>
            </div>
        </transition>
    `,
    mounted() {
        this.$bus.$on('message-close', () => {
            this.$emit('update:show', false)
        })
    }
})
</script>

二、使用CSS动画库

引入css动画库animate.css 后在transition上添加类名即可

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<transition 
    enter-active-class="animated bounceIn" 
    leave-active-class="animated bounceOut"
></transition>

三、JavaScript动画钩子

可以在属性中声明 JavaScript 钩子，使用JS实现动画。

<transition 
            v-on:before-enter="beforeEnter" // 动画开始前，设置初始状态 
            v-on:enter="enter" // 执行动画
            v-on:after-enter="afterEnter" // 动画结束，清理工作 
            v-on:enter-cancelled="enterCancelled" // 取消动画
            v-on:before-leave="beforeLeave" 
            v-on:leave="leave" 
            v-on:after-leave="afterLeave"
            v-on:leave-cancelled="leaveCancelled">
</transition>

3.1 css动画结合js钩子

demo:js实现消息弹窗弹出动画

opactity原来用css做的，去掉

  /* .fade-enter, .fade-leave-to {
            opacity: 0;
  } */

加上js钩子

Vue.component('message', {
    props: ['show'],
    template: ` 
        <transition name='fade'
            @before-enter="beforeEnter"
            @enter="enter"
        >
           ...
        </transition>
    `,
    methods: {
        beforeEnter(el) {
            el.style.opacity = 0
        },
        enter(el, done) {
            document.body.offsetHeight;  // 触发回流激活动画
            el.style.opacity = 1;
        },
    },
})

3.2 纯js钩子实现动画

引入js动画库：velocity.js

 <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"> </script>

Vue.component('message', {
    props: ['show'],
    template: ` 
        <transition name='fade'
            @before-enter="beforeEnter"
            @enter="enter"
            @before-leave="beforeLeave"
            @leave="leave"
        >
          ...
        </transition>
    `,
    methods: {
        beforeEnter(el) {
            el.style.opacity = 0
        },
        enter(el, done) {
           Velocity(el, {opacity: 1}, {duration: 500, complete: done})
        },
        beforeLeave(el) {
            el.style.opacity = 1
        },
        leave(el, done) {
            Velocity(el, {opacity: 0}, {duration: 500, complete: done})
        }
    },
})

四、列表过渡

利用transition-group可以对v-for渲染的每个元素应用过渡

demo：课程列表新增、删除元素时会应用上fade动画

<ul>
     <transition-group name="fade">
         <li v-for="item in list" :key="item.name">
             {{item.name}}
                 </li>
	  </transition-group>
</ul>

The end.