首頁手記【九月打卡】第20天 Vue3框架

【九月打卡】第20天 Vue3框架

標簽：

Vue.js

课程名称：2022持续升级 Vue3 从入门到实战掌握完整知识体系

课程章节：第4章 Vue 中的动画

主讲老师：Dell

课程内容：

今天学习的内容包括：

:css="false"
使用js实现动画效果
setInterval
setTimeout
:duration="{ enter:1000, leave: 3000}"控制出场和入场动画的时间
编程练习

课程收获：

:duration="{enter:1000, leave: 3000}" 对动画和过渡的时常控制

enter对入场动画的控制,leave对出场动画的控制,

:css="false"禁用css的动画控制

动画执行之前的钩子函数@before-enter,@enter动画执行运行的钩子函数

setInterval(() => {},1000) 间隔1秒执行一次

setTimeout(() => {},1000) 定时器

handleEnterActive(el, done) {
const animation = setInterval(() => {
const color = el.style.color;
if (color === 'red') {
el.style.color = 'green';
} else {
el.style.color = 'red';
}
}, 1000)
setTimeout(() => {
clearInterval(animation);
},3000)
},

done();动画执行结束,

@after-enter="handleEnterEnd"只有动画执行结束后(执行done()函数后)才会触发这个@after-enter

出场动画

@before-leave=""离场动画执行之前(接收el)

@leave=""离场动画执行中(接收el,done)

@leave-after=""离场动画执行结束(接收el)

编程练习
<!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>Document</title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://unpkg.com/vue@next"></script>
<style>
@keyframes shake { /* 定义一个关键帧shake的动画效果 */
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}
.v-enter-from {
color: red;
}
.v-enter-active {
animation: shake 3s;
transition: all 3s ease-in;
}
.v-leave-active { /* 表示在整个过程中我去怎么执行这个动画(根据opacity透明度,在3s内规定以慢速结束的过渡效果) */
animation: shake 3s;
color: aqua;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return { /* show为true则显示,反之false不显示 */
show: false
}
},
methods: {
handleClick() {
this.show = !this.show;
},
handleBeforeEnter(el) { /* 动画执行之前 */
el.style.color = "red";
},
handleEnterActive(el, done) { /* 动画执行之中 */
const animation = setInterval(() => {
const color = el.style.color;
if (color === 'red') {
el.style.color = 'green';
} else {
el.style.color = 'red';
}
}, 1000)
setTimeout(() => {
clearInterval(animation);/* 3秒后停止animation */
done();
},3000)
},
handleEnterEnd() {
alert(123);
}
},
template: `
<transition
:css="false"
@before-enter="handleBeforeEnter"
@enter="handleEnterActive"
@after-enter="handleEnterEnd"
>
<div v-show="show">Hello</div>
</transition>
<button @click="handleClick">按钮</button>
`
})

const vm = app.mount('#root')
</script>
</html>