过渡效果

<style>

.xxxx-enter-active,         // 显示过渡

.xxxx-leave-active {        // 隐藏过渡

transition: all 1s;

}

 

// 指定隐藏时 的样式

.xxxx-enter,        // 指定过渡

.xxxx-leave-to {        // 指定过渡

opacity: 0;

transform: translateX(50px);

}

</style>

------------------------------------------------------------------

<div id="test">

<button @click="isShow=!isShow">切换</button>

<transition name="xxxx">

<p v-show="isShow">哈哈</p>

</transition>

</div>

动画效果