给动画标签 transition 里设置- - -
① :css=“false”（不使用css控制动画效果）
② 然后给标签绑定动画属性和对应方法
@before-enter=“方法名1” - - -入场前
@enter=“方法名2” - - -入场时
@after-enter=“方法名3” - - -入场后
@before-leave=“方法名4” - - -出场前
@leave=“方法名5” - - -出场时
@after-leave=“方法名6” - - -出场后
更多方法和详情请上网查询
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js实现动画效果</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
show: false
}
},
methods: {
handleClick() {
this.show = !this.show
},
handleBeforeEnter(el) {
el.style.color = 'pink'
},
handleEnterActive(el, done) {
const timer = setInterval(() => {
if(el.style.color === 'pink') {
el.style.color = 'green'
} else {
el.style.color = 'pink'
}
}, 1000)
setTimeout(() => {
clearInterval(timer)
done()
}, 5000)
},
handleAfterEnter(el) {
el.style.color = 'green'
alert('我来了我来了~')
},
handleBeforeLeave(el){
alert('轻轻的，我走了')
},
handleLeaveActive(el, done) {
const timer = setInterval(() => {
if(el.style.color === 'green') {
el.style.color = 'palevioletred'
} else {
el.style.color = 'green'
}
}, 1000)
setTimeout(() => {
clearInterval(timer)
done()
}, 5000)
},
handleAfterLeave(el) {
el.style.color = 'yellow'
alert('bye')
}
},
template: `
<transition :css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnterActive"
@after-enter="handleAfterEnter"
@before-leave="handleBeforeLeave"
@leave="handleLeaveActive"
@after-leave="handleAfterLeave">
<div v-if="show">你好波吉，我是卡克</div>
</transition>
<button @click="handleClick">点击显示/隐藏</button>
`
})
const vm = app.mount('#root')
</script>
</html>
页面效果：
