vue2.0中css过渡动画总结

版权声明:本文为博主原创文章,欢迎转载,无须授权 https://blog.csdn.net/u012713450/article/details/73748396

vue2.0中css过渡动画总结

vue.2.0中的过渡动画利用自身的transition组件实现,有四种情形可以实现过渡效果

  • 利用v-if渲染元素时
  • 利用v-show展示或者隐藏元素时应用过渡生效
  • 动态组件(把几个组件挂载到一个父节点上,在父节点绑定变量来决定显示哪个子组件)
  • 组件根节点

过渡有两种总的状态:即enter(过渡开始)和leave(过渡结束)
这两中状态再细分,可分出6种状态,对应6个类名:

v-enter
开始过渡。在元素被插入(也就是数据控制dom显示)时生效,在下一个帧移除。可以定义过渡的开始状态。

v-enter-active
定义过渡的状态。在元素整个过渡过程中(v-enter的下一个阶段)作用,在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

v-enter-to
(2.1.8版及以上) 开始过渡的最后一个状态,在v-enter-active之后执行。在元素被插入一帧后生效(于此同时 v-enter 被删除),在 transition/animation 完成之后移除。可以定义过渡的最终状态。

v-leave
过渡的最终状态开始消失的第一个阶段,在离开过渡被触发时生效,在下一个帧移除。

v-leave-active
定义过渡离开的中间状态。在元素整个过渡离开过程中作用,在离开过渡被触发后立即生效(v-leave的下一个阶段),在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。

v-leave-to
定义过渡离开的最后状态。对于切换(toggle)效果来说,就是回到最开始的状态。

各个状态的关系以及什么阶段定义何种状态

各种状态的关系

示例

控制元素的滑入与滑出,例如:
DOM结构,要在transition组件上添加name属性,并在css中使用name的属性值替代以上v-状态种的v作为类名

  <transition name="slide">
    <div class="food" v-show="showFlag" @click="hide">
        <div class="food-content">
          <div class="imang-header">
            <img :src="food.image" >
          </div>
        </div>
    </div>
  </transition>

css样式:使用的是stylus语法

   .food
    position :fixed
    left:0
    top:0
    bottom: 48px
    z-index:30
    width :100%
    background :#fff
    /*定义元素最终移动到的位置,以及移动到此位置需要的时间*/
  .slide-enter-active
    transition: all .5s ease
    transform:translate3d(0,0,0)
    /*定义元素从什么位置离开,以及离开岛指定位置所需的时间*/
  .slide-leave-active
    transition: all .5s ease
    transform:translate3d(0,0,0)
    /*定义元素从100%的位置移入到0,过渡结束后再从0回到100%的位置*/
  .slide-enter,.slide-leave-to
    transform:translate3d(100%,0,0)

以上是vue2.0过渡效果的简单用法,如有错误,欢迎拍砖指正~~

阅读更多
换一批

没有更多推荐了,返回首页