在Vue中,我们可以使用v-if和v-show来控制元素的显示/隐藏, 而如果要实现动画效果,则需要使用transition组件。
比如说,如果你想在隐藏/显示一个元素时使用fade-in/fade-out动画,你可以这样写:
<transition name="fade">
<p v-if="show">Hello World</p>
</transition>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
</style>
这样就能实现隐藏/显示元素时的动画效果了。