溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
@before-enter，在隱藏后，點擊讓它顯示的時候，顯示之前會觸發。@enter不同，是在動畫執行的過程中觸發。done觸發完成之后就是@after-enter。這些是通過js鉤子來實現，也就是js來實現的：
<!DOCTYPE?html> <html> <head> ????<title></title> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/> ????<link?rel="stylesheet"?type="text/css"?href="./animate.css"> ????<script?src="./vue.js"></script> ????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?--> </head> <body> ????<div?id="root"> ????????//自定義class名字： ????????<transition? ????????????name="fade"? ????????????@before-enter="handleBeforeEnter" ????????????@enter="handleEnter" ????????????@after-enter="handleAfterEnter" ????????> ????????????<div?v-show="show">hello</div> ????????</transition> ????????<button?@click="handleClick">切換</button> ????</div> ????<script?type="text/javascript"> ????????var?vm?=?new?Vue({ ????????????el:?"#root", ????????????data:?{ ????????????????show:?true ????????????}, ????????????methods:?{ ????????????????handleClick:?function()?{ ????????????????????this.show?=?!this.show ????????????????}, ????????????????//el指的是動畫包裹的標簽 ????????????????handleBeforeEnter:?function(el)?{ ????????????????????//console.log("handleBeforeEnter") ????????????????????//在標簽從隱藏點擊顯示的時候，變成了紅色 ????????????????????el.style.color?=?"red" ????????????????}, ????????????????//接收兩個回調函數，el同上，done ????????????????handleEnter:?function(el,?done)?{ ????????????????????//之前顯示是紅色，兩秒后變成綠色 ????????????????????setTimeout(()=>{ ????????????????????????el.style.color?=?"green" ????????????????????},?2000) ????????????????????setTimeout(()=>{ ????????????????????????//但4秒才告訴vue結束(也就是2秒后變綠，又4-2秒后變黑) ????????????????????????done()?//這個done很重要，執行完之后要告訴vue，已經執行完 ????????????????????},?4000) ????????????????}, ????????????????handleAfterEnter:?function(el)?{ ????????????????????el.style.color?=?"black" ????????????????} ????????????} ????????}); ????</script> </body> </html>
當然，除了入場動畫，還有出場動畫：
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
</head>
<body>
????<div?id="root">
????????//自定義class名字：
????????<transition?
????????????name="fade"?
????????????@before-leave="handleBeforeLeave"
????????????@leave="handleLeave"
????????????@after-leave="handleAfterLeave"
????????>
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????},
????????????????//el指的是動畫包裹的標簽
????????????????handleBeforeLeave:?function(el)?{
????????????????????//console.log("handleBeforeLeave")
????????????????????//在標簽從隱藏點擊顯示的時候，變成了紅色
????????????????????el.style.color?=?"red"
????????????????},
????????????????//接收兩個回調函數，el同上，done
????????????????handleLeave:?function(el,?done)?{
????????????????????//之前顯示是紅色，兩秒后變成綠色
????????????????????setTimeout(()=>{
????????????????????????el.style.color?=?"green"
????????????????????},?2000)
????????????????????setTimeout(()=>{
????????????????????????//但4秒才告訴vue結束(也就是2秒后變綠，又4-2秒后變黑)
????????????????????????done()?//這個done很重要，執行完之后要告訴vue，已經執行完
????????????????????},?4000)
????????????????},
????????????????handleAfterLeave:?function(el)?{
????????????????????setTimeout(()=>{
????????????????????????el.style.color?=?"black"
????????????????????},?2000)
????????????????}
????????????}
????????});
????</script>
</body>
</html>使用velocity。下載地址：http://velocityjs.org/
<!DOCTYPE?html>
<html>
<head>
????<title></title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
????<link?rel="stylesheet"?type="text/css"?href="./animate.css">
????<script?src="./vue.js"></script>
????<script?src="./velocity.js"></script>
????<!--?<script?src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script>?-->
</head>
<body>
????<div?id="root">
????????//自定義class名字：
????????<transition?
????????????name="fade"?
????????????@before-enter="handleBeforeEnter"
????????????@enter="handleEnter"
????????????@after-enter="handleAfterEnter"
????????>
????????????<div?v-show="show">hello</div>
????????</transition>
????????<button?@click="handleClick">切換</button>
????</div>
????<script?type="text/javascript">
????????var?vm?=?new?Vue({
????????????el:?"#root",
????????????data:?{
????????????????show:?true
????????????},
????????????methods:?{
????????????????handleClick:?function()?{
????????????????????this.show?=?!this.show
????????????????},
????????????????//el指的是動畫包裹的標簽
????????????????handleBeforeEnter:?function(el)?{
????????????????????el.style.opacity?=?0;
????????????????},
????????????????//接收兩個回調函數，el同上，done
????????????????handleEnter:?function(el,?done)?{
????????????????????//注意，要加上complete:?done告訴vue結束
????????????????????Velocity(el,?{opacity:1},?{duration:?1000,?complete:?done})
????????????????},
????????????????handleAfterEnter:?function(el)?{
????????????????????alert("動畫結束")
????????????????}
????????????}
????????});
????</script>
</body>
</html>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
