|
一、单元素/组件的入场/出场动画：
- 什么是入场：元素从隐藏变成为展示
- 什么是出场：元素从展示变成隐藏
- 入场
1）vue提供了transition标签
template: `
<div>
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
`
2）需要配合样式使用transition：
v-enter-from: 入场最初的效果
v-enter-active：入场动画/过渡的执行过程中，动画/过渡效果是什么样的
v-enter-to：入场最终效果
v-leave-from: 内容将要离开还没有离开的时候的效果
v-leave-active: 出场效果怎么执行的
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>24</title>
<style>
.v-enter-from {
opacity: 0;
}
.v-enter-active {
transition: opacity 3s ease-out;
}
.v-enter-to {
opacity: 1;
}
.v-leave-from {
opacity: 1;
}
.v-leave-active {
transition: opacity 3s ease-out;
}
.v-leave-to {
opacity: 0;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// 单元素，单组件的入场出场动画
const app = Vue.createApp({
data() {
return {
show: true
}
},
methods: {
handleClick() {
this.show = !this.show
}
},
template: `
<div>
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
`
});
const vm = app.mount('#root')
</script>
</body>
</html>
单个标签入场/出场动画效果如下代码：
<!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>24</title>
<style>
@keyframes shake {
0% {
transform: translateX(-100px);
}
50% {
transform: translateX(-50px);
}
100% {
transform: translateX(50px)
}
}
.v-leave-active {
animation: shake 3s;
}
.v-enter-active {
animation: shake 3s;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
// 单元素，单组件的入场出场动画
const app = Vue.createApp({
data() {
return {
show: true
}
},
methods: {
handleClick() {
this.show = !this.show
}
},
template: `
<div>
<transition>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
`
});
const vm = app.mount('#root')
</script>
</body>
</html>
|