课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：第4章 Vue 中的动画
主讲老师：Dell
课程内容：
今天学习的内容包括：
transition标签
单元素同时设置入场出场过渡+动画
自定义动画类名的名字enter-active-class
v-if和v-show
第三方的css动画库
编程练习
课程收获：
自定义动画类名的名字
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)
<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;
}
},
template: `
<transition>
<div v-show="show">Hello</div>
</transition>
<button @click="handleClick">按钮</button>
`
})
const vm = app.mount('#root')
</script>
如果执行动画和过渡的过程之中,如果执行的时间不一致,当类型type="transition"我以transition过渡效果的时间为统一的时间
<transition type="transition">
编程练习
<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;
}
},
template: `
<transition type="transition">
<div v-show="show">Hello</div>
</transition>
<button @click="handleClick">按钮</button>
`
})
今天学习了transition标签,单元素同时入场/出场动画+过渡,自定义动画类名的名字,还可以方便使用第三方的css动画库,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!