动画的理解
- 操作 css 的 trasition（过渡） 或 animation（动画）
- vue 会给目标元素添加/移除特定的 class
-
过渡的相关类名
xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式
image.png
编码1：
<style>
.fade-enter-active, .fade-leave-active { //显示/隐藏时的过渡效果
transition: opacity .5s //过渡时候改变的元素opacity .5s持续时间
}
.fade-enter, .fade-leave-to { //进入之前和离开之后，其实就是隐藏时的样式
opacity: 0
}
/* 可以设置不同的进入和离开动画 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
</style>
<div id="demo1">
<button @click="show = !show">
Toggle1
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
<div id="demo2">
<button @click="show = !show">
Toggle2
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#demo1',
data: {
show: true
}
})
new Vue({
el: '#demo2',
data: {
show: true
}
})
</script>
编码2：
<style>
.bounce-enter-active {
animation: bounce-in 1s;
}
.bounce-leave-active {
animation: bounce-in 1s reverse; //reverse颠倒
}
@keyframes bounce-in {
0% {transform: scale(0); //动画持续时间为1s，当0s的时候，没有显示
}
50% {transform: scale(1.5); //当0.5s的时候，放大1.5倍
}
100% {transform: scale(1); //当1s结束的时候，显示为原始大小
}
}
</style>
<div id="test2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show" style="display: inline-block">Look at me!</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: '#test2',
data: {
show: true
}
})
</script>
