Vue显示和隐藏的过渡动画

时间：2018-05-29 19:43:07 收藏：0 阅读：8820

单元素/组件的过渡
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
}

动画效果：

技术分享图片