本节知识点
- (一)Vue中CSS动画原理
(一)原理
Vue里面的动画必须用transition最外层的标签包裹起来然后配合name属性
要是不写name属性默认就是v-
例如
<transition name="fade">
<div v-if="show">Hello World</div>
</transition>
有的时候我希望自定义类名Vue中也提供了enter-active-class="自定义类名" leave-active-class="自定义类名",这样配合animate.css使用
<body>
<div id="app">
<transition enter-active-class="show" leave-active-class="hide">
<div v-if="show">Hello World</div>
</transition>
<button @click="change">点击切换</button>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
message: "Hello World!",
show: true
},
methods: {
change() {
this.show = !this.show;
}
},
})
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
#app {
font-size: 24px;
color: #000;
}
/*动画开始到结束有*/
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.show {
transform-origin: left center;
animation: bounce-in 1s;
}
/*动画开始到结束有*/
.hide {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
原理: .v-enter ,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active Vue里面的动画效果必须要经历这3个步骤
(2)代码
<body>
<div id="app">
<transition name="fade">
<div v-if="show">Hello World</div>
</transition>
<button @click="change">点击切换</button>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
message: "Hello World!",
show: true
},
methods: {
change() {
this.show = !this.show;
}
},
})
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
#app {
font-size: 24px;
color: #000;
}
/*初始化开始，运动就没有了*/
.fade-enter {
opacity: 0;
}
/*运动开始了*/
.fade-enter-to {}
/*动画开始到结束有*/
.fade-enter-active {
transition: opacity 1s;
}
/*运动离开初始化,运动就没有了*/
.fade-leave {
opacity: 1;
}
/*运动开始了*/
.fade-leave-to {
opacity: 0;
}
/*动画开始到结束有*/
.fade-leave-active {
transition: opacity 1s;
}
</style>
