首页手记【九月打卡】第21天 Vue3框架

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

标签：

Vue.js

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

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

主讲老师：Dell

课程内容：

今天学习的内容包括：

CSS 过渡与动画效果
transition 标签
实现单元素组件的过渡和动画效果
编程练习

课程收获：

首先定义一个过渡类transition,添加一个transition过渡属性

transition: 3s background-color ease;

当背景色发生变化的时候会在3s进行一个缓慢增速的一个效果

然后定义两个背景颜色的类

.pink {

background-color: pink;

}

.aqua {

background-color: aqua;

}

然后再标签上面绑定上transition类

<div :class="animate">{{message}}</div>

animate是一个对象里面包含了transition属性值,我们设置默认属性为pink,添加一个按钮button

<button @click="handleClick">按钮</button>绑定一个handleClick事件,

当我们点击handleClick事件的时候进行背景颜色的切换,

this.animate.pink = !this.animate.pink;

this.animate.aqua = !this.animate.aqua;

当我们元素的背景颜色是粉色就给它取反,设置为false,

当我们aqua背景颜色为false的时候给它取反设置为true,这样我们就达到了一个背景颜色切换的一个效果

v-enter-from 表示入场动画开始的时候

v-enter-active 属性表示在整个过程中我去怎么执行这个动画(根据opacity透明度,在3s内规定以慢速结束的过渡效果 )

v-enter-to 表示入场动画结束的时候

反之隐藏出场动画

v-leave-from

v-leave-active

v-leave-to

<style>
@keyframes leftToRight { /* 定义一个关键帧leftToRight的动画效果 */
0% {
transform: translateX(-100px); /* 向左移动100像素 */
}
50% {
transform: translateX(+500px); /* 向右移动500像素 */
}
0% {
transform: translateX(0px); /* 回到原点 */
}
}

.animation { /* 定义一个动画样式 */
animation: leftToRight 3s;
}

.transition { /* 定义一个过渡样式 ease缓慢增速的一个效果*/
transition: 3s background-color ease; /* 当背景色发生变化的时候会在3s进行一个缓慢增速的一个效果 */
}

.pink {
background-color: pink;
}

.aqua {
background-color: aqua;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello,World!',
styleObj: {
background: 'pink',
}
}
},
methods: {
handleClick() {
if (this.styleObj.background === 'pink') {
this.styleObj.background = 'aqua'
} else {
this.styleObj.background = 'pink'
}
}
},
template: `
<div class="transition" :style="styleObj">{{message}}</div>
<button @click="handleClick">按钮</button>
`
})

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

自定义动画类名的名字

enter-active-class="Hi"的命名方式来简化样式的名字,在style标签里就可以用.Hi来进行使用

leave-active-class="Bye"的命名方式来简化样式的名字,在style标签里就可以用.Bye来进行使用

还有

enter-from-class

enter-to-class

leave-from-class

leave-to-class

<transition
enter-active-class="Hi"
leave-active-class="Bye">
<div v-show="show">Hello</div>
</transition>
里面的v-if也可以替换成v-show,只不过v-if是删除dom标签,v-show是显示和隐藏Dom标签

使用自定义动画类名的形式,可以做一些非常复杂的自定义动画,也可以使用一些第三方的css动画库例(animate.style)

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

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

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

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

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

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

done();动画执行结束,

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

<style>
@keyframes shake { /* 定义一个关键帧shake的动画效果 */
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px);
}
}

.D-enter-active {
animation: shake 3s;
}
.D-leave-active { /* 表示在整个过程中我去怎么执行这个动画(根据opacity透明度,在3s内规定以慢速结束的过渡效果) */
transition: opacity 3s ease-out;
}
.D-leave-to {
opacity: 0;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return { /* show为true则显示,反之false不显示 */
show: true
}
},
methods: {
handleClick() {
this.show = !this.show;
}
},
template: `
<transition name="D">
<div v-if="show">Hello</div>
</transition>
<button @click="handleClick">按钮</button>
`
})

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

出场动画

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

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

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

<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)/* 1秒一执行 */
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>
`
})