<!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>Document</title>
</head>
<body>
<div id="app">
<!-- vue對于transtion包裹起來的標簽, 提供了對應的動畫事件, 供我們使用js的方式編寫動畫 -->
<transition v-on:before-leave="bLeave" v-on:leave="leave" v-on:after-leave="aLeave">
<p v-if="isShow">白毛浮綠水</p>
</transition>
<button @click="change">顯示隱藏</button>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: true,
left: 0
},
methods: {
change: function() {
this.isShow = !this.isShow;
},
// 動畫前做的事情在這里寫, 可以在這里定義元素的初始樣式
bLeave(el) {
console.log(el);
el.style.marginLeft = 0;
},
// 動畫過程在這里編寫, 該函數(shù)除了可以接收到元素外, 還有一個done方法, 用于告訴vue什么時候動畫結束的
// 注意事項: 必須在動畫結束時, 手動調用done方法, 不然元素就不會消失
// 注意事項2: 有些時候我們修改元素的style視圖不會馬上更新, 解決方案是把一些需要計算的數(shù)據(jù)定義在data里,
// 修改data里的數(shù)據(jù), 會讓vue強制更新視圖
leave(el, done) {
console.log(el);
var timer = setInterval(() => {
this.left += 10;
el.style.marginLeft = `${this.left}px`;
if(this.left >= 200) {
clearInterval(timer);
done();
}
}, 300);
},
// 動畫結束時, 如果元素樣式需要重置, 那么可以再這里重置
aLeave(el) {
console.log(el);
// 如果要實現(xiàn)多次效果，可以在結束之后將上面的left清0
this.left = 0;
}
}
});
</script>
</body>
</html>
03_10.使用動畫鉤子函數(shù)
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
- 正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內容
- ?+ (void)transitionWithView:(UIView *)view duration:(NSTi...
- 先上圖 遇到的一個問題 在我的項目中，常用的生命周期鉤子函數(shù)一直都是mounted，對于大部分情況，都是屢試不爽、...
- 解決思路來自于：http://568464209.blog.51cto.com/7726521/1769605
