码迷,mamicode.com
首页 > 其他好文 > 详细

Vue显示和隐藏的过渡动画

时间:2018-05-29 19:43:07      阅读:8820      评论:0      收藏:0      [点我收藏+]

标签:图片   节点   bsp   NPU   net   inpu   ogg   water   技术分享   

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

动画效果:

技术分享图片

 

Vue显示和隐藏的过渡动画

标签:图片   节点   bsp   NPU   net   inpu   ogg   water   技术分享   

原文地址:https://www.cnblogs.com/liuwei54/p/9107078.html

(2)
(2)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!