Introducción
一.
指定过渡动画的步骤:
1.在目标元素外面包裹<transition name="xxx">
2.为name名指定CSS样式
指定过度样式transition(css3的属性)
指定隐藏时的样式：opacity/或者其他(width等等)
二.
1.操作 css 的 transition 或 animation
2.vue 会给目标元素添加/移除特定的 class
3.过渡的相关类名:
xxx-enter-active：指定显示的 transition
xxx-leave-active：指定隐藏的 transition
xxx-enter/xxx-leave-to：指定隐藏时的样式
Ejemplo de código
<style>
/* demo1 */
/* 显示/隐藏的过渡效果 */
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}
/* 隐藏时的样式 */
.xxx-enter,.xxx-leave-to{
opacity: 0;
}
/* demo2 */
/* 显示的过渡效果 */
.yyy-enter-active{
transition: all 1s;
/* transform: translateX(20px); */
}
/* 隐藏时的过渡效果 */
.yyy-leave-active{
transition: all 3s;
}
/* 隐藏时的样式 */
.yyy-enter,.yyy-leave-active{
opacity: 0;
transform: translateX(20px);
}
</style>
<body>
<div id="demo1">
<button @click="isShow = !isShow">Toggle</button>
<transition name="xxx">
<p v-show="isShow">hello</p>
</transition>
</div>
<div id="demo2">
<button @click="isShow = !isShow">Toggle</button>
<transition name="yyy">
<p v-show="isShow">hello</p>
</transition>
</div>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<script>
new Vue({
el:"#demo1",
data:{
isShow:true
}
})
new Vue({
el:"#demo2",
data:{
isShow:true
}
})
</script>
</body>