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

vue动画

时间:2020-06-13 13:18:47      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:元素   显示   size   定义   mil   cli   开关   插入   完成   

1、在vue组件中使用动画

  在进入/离开的过度中,会有6个class切换

    v-enter:定义进入过度的开始状态,在元素被插入之前生效,在元素被插入之后的下一帧移除

    v-enter-active:定义进入过度生效时的状态,在整个进入过度的阶段中应用,在元素被插入之前生效,在过度/动画完成之后移除,这个类可以被用来定义进入过度的过度时间,延迟和曲线函数

    v-enter-to:2.1.8版本及以上,定义进入过度的结束状态,在元素被插入之后下一帧生效

    v-leave:定义离开过度的开始状态,在离开过度被触发时立刻生效,下一帧被移除

    v-leave-active:定义离开过度生效时的状态,在整个离开过度的阶段中应用,在离开过度被触发时立刻生效,可以被用来定义离开过度的事件,延迟,曲线函数

    v-leave-to:2.1.8版本及以上,定义离开过度的结束状态,在离开过度动画结束时触发

 

  示例1:

    <transtion  name="aa">

      <p  v-show="flag">显示或隐藏</p>

    </transtion>

    <button  @click="flag=!flag">开关<button>

    flag :  true

    .aa-enter-active, .aa-leave-active{

      transtion: opacity  1s  ease;

    }

    .aa-enter, .aa-leave-to{

      opacity: 0

    }

 

  示例2: 

    <transtion  enter-active-class="active"  leave-active-class="active">

      <p  v-show="flag">显示或隐藏</p>

    </transtion>

    <button  @click="flag=!flag">开关<button>

    flag :  true

    .active{

      transtion: opacity  1s  ease;

    }

vue动画

标签:元素   显示   size   定义   mil   cli   开关   插入   完成   

原文地址:https://www.cnblogs.com/cuishuangshuang/p/13113461.html

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