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

Vue过渡和动画效果

时间:2020-12-10 10:40:02      阅读:3      评论:0      收藏:0      [点我收藏+]

标签:for   img   round   orm   attribute   city   mat   opacity   animate   

过渡

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

技术图片

 

 

自定义过渡的类名

 

我们可以通过以下 attribute 来自定义过渡类名:

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)
<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >

 

 

 

代码演示:

.guodu-enter, .guodu-leave-to {
            opacity: 0;
            transform: scale(2);
        }
        .guodu-enter-active, .guodu-leave-active {
            transition:all .5s;
            
        }
        .a{
            margin:0 auto;
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
<transition name="guodu">
            <div v-if="flag" class="a">
               
            </div>
        </transition>
        <button @click="flag=!flag">按钮</button>
 data: {
            flag:true
        },

 

效果展示:

gif暂时没弄。

 

Vue过渡和动画效果

标签:for   img   round   orm   attribute   city   mat   opacity   animate   

原文地址:https://www.cnblogs.com/hjqq/p/14090590.html

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