js钩子函数实现动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
<style>
.dd {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="点击" @click="isshow =!isshow" />
<br />
<br />
<br />
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
>
<div class="dd" v-show="isshow"></div>
</transition>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
isshow: false,
},
methods: {
beforeEnter(el) {
// el 参数代表当前做动画的元素
el.style.opacity = 0;
console.log("动画执行之前");
},
enter(el, done) {
console.log("动画开始执行");
// done 是一个回调函数，此方法调用说明动画结束；如果不调用这个方法，说明动画没有执行结束。所以在合适的时机一定要调用这个done函数。
function updateOpacity() {
el.style.opacity = el.style.opacity * 1 + 0.01;
if (el.style.opacity * 1 < 1) {
requestAnimationFrame(updateOpacity);
} else {
done();
}
}
updateOpacity();
},
afterEnter(el) {
console.log("动画执行结束");
// el.style.opacity = 0;
el.style.backgroundColor = "yellow";
},
beforeLeave(el) {
el.style.opacity = 1;
},
leave(el, done) {
function updateOpacity() {
el.style.opacity = el.style.opacity * 1 - 0.01;
if (el.style.opacity * 1 > 0) {
requestAnimationFrame(updateOpacity);
} else {
done();
}
}
updateOpacity();
},
afterLeave(el) {
// ..
},
},
});
</script>
</body>
</html>
效果如下：
浙公网安备 33010602011771号