vue中的js動畫與Velocity.js結合

本文轉載自查看原文 2018-09-22 08:09 1327 Vue

vue里面除了用css寫動畫，還可以用js寫動畫，vue的transition中，定義了幾個動畫鈎子

第一個動畫鈎子：@before-enter

<div id='app'>
　　<transition
　　　　@before-enter='handleBeforeEnter'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切換</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　},
　　　　handleBeforeEnter:function(el){
　　　　　　el.style.color='red'
　　　　}
　　}
})
</script>

在vue的transition中，在顯示數據前，會自動觸發before-enter這個事件，比如上面

第二個動畫鈎子：@enter

<div id='app'>
　　<transition
　　　　@before-enter='handleBeforeEnter'
　　　　@enter='handleEnter'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切換</button>
</div>
<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　},
　　　　handleBeforeEnter:function(el){
　　　　　　el.style.color='red'
　　　　},
　　　　handleEnter:function(el,done){
　　　　　　setTimeout(function(){
　　　　　　　　el.style.color='green';
　　　　　　　　done();
　　　　　　},2000);
　　　　}
　　}
})
</script>

在執行動畫的時候，會觸發@enter這個事件，我們大部分動畫流程都是寫在這里嗎，這個事件跟@before-enter，有點不一樣的地方就是，多了一個參數done,在執行完后，回調一下done()，告訴vue，動畫執行完了，vue好執行下一個鈎子函數

第三個鈎子函數:@after-enter

<div id='app'>
　　<transition
　　　　@before-enter='handleBeforeEnter'
　　　　@enter='handleEnter'
　　　　@after-enter='handleAfterEnter'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切換</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　},
　　　　handleBeforeEnter:function(el){
　　　　　　el.style.color='red'
　　　　},
　　　　handleEnter:function(el,done){
　　　　　　setTimeout(function(){
　　　　　　　　el.style.color='green';
　　　　　　},2000);
　　　　　　setTimeout(function(){
　　　　　　　　done();
　　　　　　},4000)
　　　　},
　　　　handleAfterEnter:function(el){
　　　　　　el.style.color='black'
　　　　}
　　}
})
</script>

@after-enter在動畫執行完后的處理

同理，有入場動畫，就有出場動畫

分別是before-leave,leave,after-leave

有了這些基礎后，就可以寫更復雜的動畫效果了，我們可以引入一個庫，叫做velocity.js

http://velocityjs.org/

打開velocity的官網，下載下來到本地

栗子：

<!DOCTYPE html>
<html lang="en">
　　<head>
　　　　<meta charset="UTF-8">
　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
　　　　<title></title>
　　　　<script src="./vue.js"></script>
　　　　<script src="../velocity.js"></script>
　　</head>
<body>
<div id='app'>
　　<transition
　　　　@before-enter='handleBeforeEnter'
　　　　@enter='handleEnter'
　　　　@after-enter='handleAfterEnter'
　　>
　　　　<div v-if='show'>hello world</div>
　　</transition>
　　<button @click='handleClick'>切換</button>
</div>

<script>
var vm = new Vue({
　　el:'#app',
　　data:{
　　　　show:true
　　},
　　methods:{
　　　　handleClick:function(){
　　　　　　this.show = !this.show;
　　　　},
　　　　handleBeforeEnter:function(el){
　　　　　　el.style.opacity=0;
　　　　},
　　　　handleEnter:function(el,done){
　　　　　　Velocity(el,{
　　　　　　　　opacity:1
　　　　　　},{
　　　　　　　　duration:1000,
　　　　　　　　complete:done
　　　　　　})
　　　　},
　　　　handleAfterEnter:function(el){
　　　　　　console.log('動畫結束')
　　　　}
　　}
})
</script>
</body>
</html>

這里就用了Velocity來實現這個動畫效果,通過這個可以寫出非常酷炫的動畫

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue中的JS與Velocity.js的結合 vue中使用js動畫與velocity.js Velocity.js動畫庫使用 javascript動畫：velocity.js學習 Velocity.js的使用 Velocity.js初步 vue里面使用Velocity.js Velocity.js的使用 Velocity.js的使用 velocity.js用法整理1