一、JS动画
JS动画的核心就是在<transition>
标签中,利用@before-enter、@enter、@after-enter 和 @before-leave、@leave、@after-leave 实现入场、离场动画!
<template>
<div id="slot">
<!-- 入场动画:@before-enter、@enter、@after-enter
离场动画:@before-leave、@leave、@after-leave -->
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-if="show">
<h1>你好!</h1>
</div>
</transition>
<button @click="showText">显示/隐藏</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
showText() {
this.show = !this.show;
},
// 参数 el 是动画 <transition> 包裹的 DOM 节点
handleBeforeEnter(el) {
el.style.color = 'red';
},
// 参数一:el DOM节点 参数二:done 回调函数
handleEnter(el, done) {
// setTimeout() 定时器,下例:2秒后执行
setTimeout(() => {
el.style.color = 'green';
}, 2000);
setTimeout(() => {
// 告诉 view 我这个动画已经执行完毕,然后才会继续执行 handleAfterEnter
done();
}, 4000);
},
// 参数一:el DOM节点
handleAfterEnter(el) {
el.style.color = 'black';
}
}
};
</script>
二、JS动画与 Velocity.js 的结合
1、安装
npm install velocity-animate@beta --save
2.调用页面引入
<script>
import Velocity from 'velocity-animate'
....
</script>
3.使用
<template>
<div id="slot">
<!-- 入场动画:@before-enter、@enter、@after-enter
离场动画:@before-leave、@leave、@after-leave -->
<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter"
@after-enter="handleAfterEnter">
<div v-if="show">
<h1>你好!</h1>
</div>
</transition>
<button @click="showText">显示/隐藏</button>
</div>
</template>
<script>
export default {
data() {
return {
show: true
};
},
methods: {
showText() {
this.show = !this.show;
},
// 参数 el 是动画 <transition> 包裹的 DOM 节点
handleBeforeEnter(el) {
el.style.opacity = 0;
},
// 参数一:el DOM节点 参数二:done 回调函数
handleEnter(el, done) {
Velocity(
el,
{opacity: 1},
{
duration: 1000,
// 当动画执行完毕之后,complete 对应的 done 函数会自动执行,然后才会执行 handleAfterEnter
complete: done
})
},
// 参数一:el DOM节点
handleAfterEnter(el) {
alert("动画执行结束");
}
}
};
</script>