课程名称：2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节：第4章 Vue 中的动画
主讲老师：Dell
课程内容：
今天学习的内容包括：
transition标签
单元素入场出场动画
v-enter-from
v-enter-active
v-enter-to
v-leave-from
v-leave-active
v-leave-to
编程练习
课程收获：
v-enter-from 表示入场动画开始的时候
v-enter-active 属性表示在整个过程中我去怎么执行这个动画(根据opacity透明度,在3s内规定以慢速结束的过渡效果 )
v-enter-to 表示入场动画结束的时候
反之隐藏出场动画
v-leave-from
v-leave-active
v-leave-to
如果需要重命名,在transition标签上面写name="名字" 使用的时候把.v改成.名字-leave-to
<!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 src="https://unpkg.com/vue@next"></script>
<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>
</html>
今天学习了transition标签,单元素入场/出场动画,重命名v-enter-from属性值,今天也是收获满满的一天，希望能够每天学习一点点,一直坚持下，加油!
随时随地看视频
