- 阐述
- 指定不使用CSS动画
- 使用JS编写动画效果
- before-enter 钩子函数
- enter 钩子函数
- after-enter 钩子函数
有时候我们不使用CSS制作动画，而使用JS来制作动画。
虽然CSS的动画比JS的效率要高，但JS在操作DOM和时间控制上有着优势。所以这节我们就来学习一下如何使用JavaScript+Vue3来制作动画。
指定不使用CSS动画
demo
@keyframes comein{
0%{
transform :translateX(-120px)
}
100%{
transform :translateX(0px)
}
}
@keyframes comeout{
0%{
transform :translateX(0px)
}
100%{
transform :translateX(-120px)
}
}
.v-enter-active{
animation: comein 1s;
}
.v-leave-active{
animation: comeout 1s;
}
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
}
},
template: `
willem
切换动画
`
})
const vm = app.mount("#app")
如果不使用CSS动画，需要在 标签上加入 :css="false"。
加上这个绑定属性的意思就是，我不再使用CSS作为动画了。可以到浏览器中看一下，此时的动画效果已经不在起作用。
此时CSS的动画没有用处了，你可以进行删除。
使用JS编写动画效果Vue为了能让我们使用JS动画效果，为我们提供了一些钩子函数。所谓钩子函数 ，就是在某一时刻会被自动调用的函数（类似之前我们讲的生命周期函数）。
before-enter 钩子函数先来看第一个钩子函数 before-enter，在动画开始前执行的函数。我们给这个钩子，绑定一个方法，比如这个方法叫做 handleBeforeEnter。
willem
写好钩子函数后，再编写对应的方法 handleBeforeEnter。
注意，这个方法接收一个参数 element,这个参数就是动画的DOM元素，有了它你就可以操作动画了。
现在程序的意思是在动画开始前，把字体颜色变为红色。
demo
@keyframes comein{
0%{
transform :translateX(-120px)
}
100%{
transform :translateX(0px)
}
}
@keyframes comeout{
0%{
transform :translateX(0px)
}
100%{
transform :translateX(-120px)
}
}
.v-enter-active{
animation: comein 1s;
}
.v-leave-active{
animation: comeout 1s;
}
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
},
handleBeforeEnter(element){
element.style.color="red"
},
},
template: `
willem
切换动画
`
})
const vm = app.mount("#app")
当动画进入时，可以使用钩子函数 enter。这里我们作一个如果字体是红色，就变成绿色；如果是绿色就变成红色的效果，并且是半秒钟变化一次。
在 template 的 标签里加入 enter 钩子函数。
编写钩子函数的业务逻辑。
handleEnterActive(element,done){
setInterval(()=>{
const color=element.style.color;
if(color=='red'){
element.style.color ="green"
}else{
element.style.color="red"
}
},500)
}
但现在如何让这个动画停下来那？ 其实这个还是比较麻烦的。需要先为 setInterval 指定一个变量 animation，然后使用setTimeout在1500毫秒后停止这个动画。
handleEnterActive(element,done){
const animation=setInterval(()=>{
const color=element.style.color;
if(color=='red'){
element.style.color ="green"
}else{
element.style.color="red"
}
},500)
setTimeout(()=>{
clearInterval(animation)
},1500)
}
此时在到浏览器中进行预览就可以看到，动画停止了。那我们再来说说 done 参数的作用，其实 done 相当于得知动画执行结束后通知执行下一个钩子函数 after-enter,如果不通知无法进入下一个钩子函数。
demo
@keyframes comein{
0%{
transform :translateX(-120px)
}
100%{
transform :translateX(0px)
}
}
@keyframes comeout{
0%{
transform :translateX(0px)
}
100%{
transform :translateX(-120px)
}
}
.v-enter-active{
animation: comein 1s;
}
.v-leave-active{
animation: comeout 1s;
}
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
},
handleEnterActive(element,done){
const animation=setInterval(()=>{
const color=element.style.color;
if(color=='red'){
element.style.color ="green"
}else{
element.style.color="red"
}
},500)
setTimeout(()=>{
clearInterval(animation)
},1500)
}
},
template: `
willem
切换动画
`
})
const vm = app.mount("#app")
这个钩子函数是当动画结束时执行的。 比如我们想在动画结束后弹出一个alter对象，就可以先写一个after-enter钩子函数，然后利用enter钩子中的done进行通知它动画执行结束。
然后在 handleEnterActive 的 clearInterval 后面使用 done()进行通知。
setTimeout(()=>{
clearInterval(animation)
done()
},1500)
这时候才会执行 handleEnterEnd 里边的方法，弹出对话框。
handleEnterEnd(){
alert('willem.com')
}
这里我们只学了入场动画的钩子函数，当然还有三个出场动画的钩子函数。
before-leave : 离场动画执行之前 leave： 开始执行离场动画 leave-after:离场动画执行结束
离场动画我们就不讲了，你可以自己试一下就可以了。
为了方便大家学习，附上本节代码：
demo
@keyframes comein{
0%{
transform :translateX(-120px)
}
100%{
transform :translateX(0px)
}
}
@keyframes comeout{
0%{
transform :translateX(0px)
}
100%{
transform :translateX(-120px)
}
}
.v-enter-active{
animation: comein 1s;
}
.v-leave-active{
animation: comeout 1s;
}
const app = Vue.createApp({
data(){
return {
isShow:false
}
},
methods:{
hanldClick(){
this.isShow = ! this.isShow
},
handleEnterEnd(){
alert('willem.com')
},
handleEnterActive(element,done){
const animation=setInterval(()=>{
const color=element.style.color;
if(color=='red'){
element.style.color ="green"
}else{
element.style.color="red"
}
},500)
setTimeout(()=>{
clearInterval(animation)
},1500)
setTimeout(()=>{
clearInterval(animation)
done()
},1500)
}
},
template: `
willem
切换动画
`
})
const vm = app.mount("#app")
