1、过渡和动画的流程
2020111711004297.png
2、过渡和动画的实例
1.过渡
<!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@3"></script>
<style>
/* 过渡效果 */
.v-enter-from,.v-leave-to{
opacity: 0;
}
.v-enter-to,.v-leave-from{
opacity: 1;
}
.v-enter-active,.v-leave-active{
transition: all 2s;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
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>
2.动画
<!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@3"></script>
<style>
@keyframes leftToright {
0%{
transform: translateX(-100px);
}
50%{
transform: translateX(-50px);
}
0%{
transform: translateX(50px);
}
}
/* 动画效果 */
.v-enter-active,.v-leave-active{
animation: leftToright 2s;
}
</style>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script>
const app = Vue.createApp({
data() {
return {
show:false
}
},
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>
- 1、v-enter-from：点击按钮，元素刚刚出现的时候你看到的样式就是v-enter中定义的样式，然后开始过渡，变成v-enter-to中定义的样式
- 2、v-enter-active：这个样式定义了出现动画中从v-enter到v-enter-to样式过渡变化所需要的时间，以及定义哪些样式是要要过渡的，以及过渡的方式，比如均匀变化，先快后慢变化等等。
- 3、v-enter-to：v-enter经过变化后变成的样式，注意出场动画到这里变为了v-enter-to的样式就结束了，然后就会突然变为元素本来的样式，这样看来变化会有点突兀，所以一般不会去定义这个样式，这样就会动画自动就会从v-enter样式过渡到元素本来的样式，这样看起来比较自然一些。
- 4、v-leave-from：类比以上就很相似了，点击按钮，离开动画最先开始就是这个类里面的样式，一般很难看到
- 5、v-leave-active：定义从v-leave到v-leave-to样式变化所需时间等
- 6、v-leave-to：离开动画经过过渡后变成的样式，注意，变成这个样式之后，元素会直接突然消失。
