Vue的Js動(dòng)畫(huà)與Velocity.js的結(jié)合

發(fā)布時(shí)間：2020-07-07 04:31:36 來(lái)源：網(wǎng)絡(luò) 閱讀：396 作者：梁十八欄目：web開(kāi)發(fā)

@before-enter，在隱藏后，點(diǎn)擊讓它顯示的時(shí)候，顯示之前會(huì)觸發(fā)。@enter不同，是在動(dòng)畫(huà)執(zhí)行的過(guò)程中觸發(fā)。done觸發(fā)完成之后就是@after-enter。這些是通過(guò)js鉤子來(lái)實(shí)現(xiàn)，也就是js來(lái)實(shí)現(xiàn)的：

<!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指的是動(dòng)畫(huà)包裹的標(biāo)簽
????????????????handleBeforeEnter:?function(el)?{
????????????????????//console.log("handleBeforeEnter")
????????????????????//在標(biāo)簽從隱藏點(diǎn)擊顯示的時(shí)候，變成了紅色
????????????????????el.style.color?=?"red"
????????????????},
????????????????//接收兩個(gè)回調(diào)函數(shù)，el同上，done
????????????????handleEnter:?function(el,?done)?{
????????????????????//之前顯示是紅色，兩秒后變成綠色
????????????????????setTimeout(()=>{
????????????????????????el.style.color?=?"green"
????????????????????},?2000)
????????????????????setTimeout(()=>{
????????????????????????//但4秒才告訴vue結(jié)束(也就是2秒后變綠，又4-2秒后變黑)
????????????????????????done()?//這個(gè)done很重要，執(zhí)行完之后要告訴vue，已經(jīng)執(zhí)行完
????????????????????},?4000)
????????????????},
????????????????handleAfterEnter:?function(el)?{
????????????????????el.style.color?=?"black"
????????????????}
????????????}
????????});
????</script>
</body>
</html>

當(dāng)然，除了入場(chǎng)動(dòng)畫(huà)，還有出場(chǎng)動(dòng)畫(huà)：

<!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指的是動(dòng)畫(huà)包裹的標(biāo)簽
????????????????handleBeforeLeave:?function(el)?{
????????????????????//console.log("handleBeforeLeave")
????????????????????//在標(biāo)簽從隱藏點(diǎn)擊顯示的時(shí)候，變成了紅色
????????????????????el.style.color?=?"red"
????????????????},
????????????????//接收兩個(gè)回調(diào)函數(shù)，el同上，done
????????????????handleLeave:?function(el,?done)?{
????????????????????//之前顯示是紅色，兩秒后變成綠色
????????????????????setTimeout(()=>{
????????????????????????el.style.color?=?"green"
????????????????????},?2000)
????????????????????setTimeout(()=>{
????????????????????????//但4秒才告訴vue結(jié)束(也就是2秒后變綠，又4-2秒后變黑)
????????????????????????done()?//這個(gè)done很重要，執(zhí)行完之后要告訴vue，已經(jīng)執(zhí)行完
????????????????????},?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指的是動(dòng)畫(huà)包裹的標(biāo)簽
????????????????handleBeforeEnter:?function(el)?{
????????????????????el.style.opacity?=?0;
????????????????},
????????????????//接收兩個(gè)回調(diào)函數(shù)，el同上，done
????????????????handleEnter:?function(el,?done)?{
????????????????????//注意，要加上complete:?done告訴vue結(jié)束
????????????????????Velocity(el,?{opacity:1},?{duration:?1000,?complete:?done})
????????????????},
????????????????handleAfterEnter:?function(el)?{
????????????????????alert("動(dòng)畫(huà)結(jié)束")
????????????????}
????????????}
????????});
????</script>
</body>
</html>

向AI問(wèn)一下細(xì)節(jié)

Vue的Js動(dòng)畫(huà)與Velocity.js的結(jié)合

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽