使用
slidename 为变量 值为 slide-left || slide-right
js中在隐藏时候执行离场动画,在isshow为true时执行入场动画,即可一个元素实现切换动画效果
<transition :name="slidename">
<div class="right2" v-show="isshow">
</div>
</transition>
css样式
.slide-left-enter {
transform: translateX(-100%);
}
.slide-left-enter-active {
transition: transform .2s;
}
.slide-left-enter-to {
transform: translateX(0);
}
.slide-left-leave {
transform: translateX(0);
}
.slide-left-leave-active {
transition: transform .5s
}
.slide-left-leave-to {
transform: translateX(-100%);
}
.slide-right-enter {
transform: translateX(100%);
}
.slide-right-enter-active {
transition: transform .2s;
}
.slide-right-enter-to {
transform: translateX(0);
}
.slide-right-leave {
transform: translateX(0);
}
.slide-right-leave-active {
transition: transform .5s;
}
.slide-right-leave-to {
transform: translateX(100%);
}
网友评论