类名过渡

在进入/离开的过渡中,总共有6个累进行切换。

  1. v-enter:进入之前,元素的起始状态,此时还没有开始进入.这是一个时间点
  2. v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。即:入场动画的时间段.
  3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。即:是动画离开之后,离开的终止状态,此时,元素动画已经结束了(这是一个时间点)
  4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。这是一个时间点.
  5. v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
  6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

示例图:
transition.png

对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">,那么 v-enter 会替换为 my-transition-enter。也可以<transition name="my">修改前缀名字。
.v-move 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果

注意:

  • 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transition-group.
    如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性.
  • ransition-group 添加 appear 属性,实现页面刚展示出来时候,入场时候的效果.
  • 通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签
  • 示例:

       <transition-group appear tag="ul">
         <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
           {{item.id}} --- {{item.name}}
         </li>
       </transition-group>

使用第三方CSS动画库

  1. 导入动画类库:

    <link rel="stylesheet" type="text/css" href="./lib/animate.css">

    2.定义 transition 及属性:

    <transition
      enter-active-class="fadeInRight"
      leave-active-class="fadeOutRight"
      :duration="{ enter: 500, leave: 800 }">
      <div class="animated" v-show="isshow">动画哦</div>
    </transition>

    使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长.
    :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长

    使用钩子函数

  2. 定义 transition 组件以及三个钩子函数
    动画钩子函数的第一个参数:el,表示 要执行动画的那个DOM元素,是个原生的 JS DOM对象

    <div id="app">
     <input type="button" value="切换动画" @click="isshow = !isshow">
     <transition
     @before-enter="beforeEnter"
     @enter="enter"
     @after-enter="afterEnter">
       <div v-if="isshow" class="show">OK</div>
     </transition>
      </div>
    • beforeEnter 表示动画入场之前,此时,动画尚未开始,可以 在 beforeEnter 中,设置元素开始动画之前的起始样式.
  3. enter 表示动画 开始之后的样式,这里,可以设置小球完成动画之后的,结束状态.
  4. 动画完成之后,会调用 afterEnter
  5. 定义三个 methods 钩子方法:

    methods: {
         beforeEnter(el) { // 动画进入之前的回调
           el.style.transform = 'translateX(500px)';
         },
         enter(el, done) { // 动画进入完成时候的回调
           // 这句话,没有实际的作用,但是,如果不写,出不来动画效果;
           // 可以认为 el.offsetWidth 会强制动画刷新
           el.offsetWidth;
           el.style.transform = 'translateX(0px)';
           //这里的 done, 起始就是 afterEnter 这个函数,也就是说:done 是 afterEnter 函数的引用
           done();
         },
         afterEnter(el) { // 动画进入完成之后的回调
           this.isshow = !this.isshow;
         }
       }
  6. 定义动画过渡时长和样式

    .show{
       transition: all 0.4s ease;
     }

v-for的列表过渡

  1. 定义过渡样式

    <style>
    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(10px);
    }
    
    .list-enter-active,
    .list-leave-active {
      transition: all 0.3s ease;
    }
    </style>
  2. 定义DOM结构,其中,需要使用 transition-group 组件把v-for循环的列表包裹起来:

     <div id="app">
    <input type="text" v-model="txt" @keyup.enter="add">
    
    <transition-group tag="ul" name="list">
      <li v-for="(item, i) in list" :key="i">{{item}}</li>
    </transition-group>
     </div>
  3. 定义 VM中的结构

     var vm = new Vue({
      el: '#app',
      data: {
        txt: '',
        list: [1, 2, 3, 4]
      },
      methods: {
        add() {
          this.list.push(this.txt);
          this.txt = '';
        }
      }
    });
Last modification:August 1, 2018
If you think my article is useful to you, please feel free to appreciate