vue中使用js動畫與velocity.js

一：vue中使用js動畫

根據上一篇安裝animate.css之后

vue中有動畫的鈎子函數，@before-enter是內容由無到有的時候自動監聽觸發的函數，函數會接收到參數el，這樣可以動態設置樣式。@enter是@before-enter觸發結束后觸發。

@enter不同的是會接收到兩個參數，參數一為元素el，參數二為done（回調函數）；done函數執行完就會觸發@after-enter函數。

出場動畫鈎子函數@before-leave、@leave、@after-leave同理

<!--vue中使用js動畫-->
<transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'>
	<p v-show='jsshow'>js動畫</p>
</transition>
<button @click="handlejsClick">切換js動畫</button>

<script>
	export default{
		data(){
			return {
				
			}
		},
		methods:{
			handlebeforeEnter(el){
				el.style.color='red'
			},
			handleEnter(el,done){
				setTimeout(()=>{
					el.style.color='green';
				},2000);
				setTimeout(()=>{
					//這里的done回調函數也比較重要，done函數觸發完又會觸發@after-ender
					done();
				},4000)
			},
			handleafterEnter(el){
				el.style.color='#535353'
			}
		},
	}
</script>

 二：vue中使用velocity.js

1.首先安裝velocity.js

npm install velocity-animate --save-dev

2.在main.js中引入

import Velocity from 'velocity-animate'

3.原理跟上面一樣，只是函數的變化方法不一樣，這里的 complete: done跟上面的回調函數同理，一定要寫，不然不會觸發handleafterEnter函數

<template>
    <div>
        <transition name='fade' @before-enter='handlebeforeEnter' @enter='handleEnter' @after-enter='handleafterEnter'>
            <p v-show='jsshow'>js動畫</p>
        </transition>
        <button @click="handlejsClick">切換js動畫</button>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                jsshow:true
            }
        },
        methods:{
            handlejsClick(){
                this.jsshow=!this.jsshow;
            },
            handlebeforeEnter(el){
                el.style.opacity=0
            },
            handleEnter(el,done){
                console.log("before結束了執行了enter")
                Velocity(el,{opacity:1},{duration:3000,complete: done})
            },
            handleafterEnter(el){
                el.style.color='red'
            }
        },
    }
</script>