本节知识点
- 关键帧实现动画效果 v-enter-active ,v-leave-active
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<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;
}
/*动画开始到结束有*/
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.fade-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
/*动画开始到结束有*/
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</html>
- (2) animate.css配合使用
一共就2个类 enter-active-class,leave-active-class 刚加载不会出现动画还需要appear-active-class等等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="css/animate.min.css">
<body>
<div id="app">
<transition enter-active-class="animated swing" leave-active-class="animated shake">
<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;
}
</style>
</html>
