Vue 中 CSS 动画原理
<div id="app">
<div v-if="show">hello world</div>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show;
}
}
})
</script>
现在希望 hello world 在隐藏和显示的时候加上渐隐渐现的动画效果。
在想要添加动画的标签外部添加 <transiton></transiton>
标签,Vue 会自动帮助我们构建一个动画的流程。
<transiton></transiton>
包裹的内容有一个过渡的动画效果,可以通过 name 属性给该标签起一个名字。
- 从隐藏状态变成显示状态:
- 从显示状态变成隐藏状态:
fade-enter 中的前缀 fade 是 transition 中 name 定义的名字。如果 transition 没有定义 name 属性,前缀默认为 v。即:v-enter,v-enter-active,……
<head>
<style>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active {
transition: opacity 3s
}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show;
}
}
})
</script>
</body>
通过在某一时刻自动向 div 元素上增加一些 class 的底层原理,Vue 帮助我们实现了 CSS 过渡动画效果。
在 Vue 中使用 animate.css 库
使用 @keyframes
实现动画效果
<head>
<style>
@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>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick() {
this.show = !this.show;