Vue显示和隐藏的过渡动画

Posted 2020-11-09 liuwei54

单元素/组件的过渡 
Vue提供了transition的封装组件，在下列情况中，可以给任何元素和组件添加”进入”和”离开”过渡动画。

条件渲染 （使用 v-if） 
条件展示 （使用 v-show） 
动态组件 
组件根节点

示例代码：

<div id="app">
        <input type="button" value="按钮" @click="toggle">
        <transition name="fade">
            <div id="div1" v-show="isShow" transiton="fade"></div>
        </transition>
    </div>

　　

.fade-enter-active, .fade-leave-active {
      transition: opacity .5s
}
.fade-enter, .fade-leave-active {
      opacity: 0
}

动画效果：