7. Vue 动画

官网参考链接

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能。在 Vue 中有以下四种方式实现动画：

一、使用过渡类名实现动画

  • 在进入/离开的过渡中，会有 6 个 class 切换。
    • v-enter：进入过渡的开始状态。
    • v-enter-active：进入过渡时间段。
    • v-enter-to: 进入过渡的结束状态。
    • v-leave: 离开过渡的开始状态。
    • v-leave-active：离开过渡时间段。
    • v-leave-to: 离开过渡的结束状态。
过渡类名

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

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

  • 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

CSS 过渡

常用的过渡都是使用 CSS 过渡，在定义过渡类名的时候使用 transition 属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Vue-Animate</title>
  <style>
/* 定义进入和离开时候的过渡状态 */
    .slide-enter,
    .slide-leave-to {
      opacity: 0;
      transform: translateX(150px);
    }
/* 定义进入和离开时候的过渡状态 */
    .slide-enter-active,
    .slide-leave-active {
      transition: all 0.8s ease;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition name="slide">
      <h3 v-if="flag">Hello World</h3>
    </transition>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        flag: false
      },
      methods: {}
    }).$mount('#app')
  </script>
</body>
</html>

CSS 动画

CSS 动画用法同 CSS 过渡。区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。在定义过渡类名的时候使用 animation 属性。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Vue-Animate</title>
  <style>
    .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click="show = !show">Toggle show</button>
    <transition name="bounce">
      <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
    </transition>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      data: {
        show: true
      }
    }).$mount('#app')
  </script>
</body>
</html>

  • animation 和 transition 主要区别在于：
    1、animation多两个参数：循环和动画方式
    2、transition 不能自行触发，通过hover等动作，或者结合js进行触发。animation可以自行运行
    3、transition可控性相对较弱，只能够指定起始和结束的状态，而animation可以定义多个关键帧
    4、动画在运行结束之后，需要回到初始状态
    5、transition的作用，可以用一句话来概括“平滑改变CSS值”

  • 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

  1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。

  2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。

  3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。

二、使用第三方类实现动画

自己写类样式太麻烦？那你你可以配合使用第三方 CSS 动画库，如 Animate.css。

animate.css 官方链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Vue-animate.css</title>
  <!--导入动画类库-->
  <link rel="stylesheet" href="node_modules/animate.css/animate.css">
</head>
<body>
  <div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <transition 
    enter-active-class="animated bounceIn" 
    leave-active-class="animated bounceOut"
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag">Hello Wolrd</h3>
    </transition>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        flag: false
      },
      methods: {}
    }).$mount('#app')
  </script>
</body>
</html>

在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定，我们可以通过 duration 属性来定制我们的动画时长

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

三、钩子函数实现动画

在过渡钩子函数中使用 JavaScript 直接操作 DOM，过渡钩子函数的第一个参数 el 表示要执行动画的那个 DOM 元素，是原生的 JS DOM 对象。

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

案例：使用钩子函数模拟小球半场动画

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Vue-</title>
  <style>
    .ball {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <input type="button" value="加入购物车" @click="flag=!flag">
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
      <div class="ball" v-show="flag"></div>
    </transition>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        flag: false
      },
      methods: {
        // 动画入场前，设置小球开始之前的起始样式
        beforeEnter(el) {
          el.style.transform = "translate(0, 0)"
        },
        // 动画开始后，设置小球完成动画之后的，结束状态
        enter(el, done) {
          // 这句话，没有实际的作用，但如果不写，出不来动画效果；
          // 可以认为 el.offsetWidth 会强制动画刷新
          // 这里使用 offsetHeight、offsetTop、offsetLeft亦可
          el.offsetWidth
          el.style.transform = "translate(150px, 450px)"
          el.style.transition = 'all 1s ease'
          // done 是 afterEnter 函数的引用
          done()
        },
        // 动画完成后，会调用 afterEnter
        afterEnter(el){
          this.flag = !this.flag
          // 1. 控制小球的显示与隐藏
          // 2. 直接跳过后半场动画，让 flag 标识符 直接变为 false
        }
      }
    }).$mount('#app')
  </script>
</body>
</html>
案例效果

四、使用第三方 JavaScript 动画库实现动画

用 Velocity.js 实现 JavaScript 动画的一个很棒的选择。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

官方案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>Vue-</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

  <div id="app">
    <button @click="show = !show">
      Toggle
    </button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-if="show">
        Demo
      </p>
    </transition>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        show: false
      },
      methods: {
        beforeEnter: function (el) {
          el.style.opacity = 0
          el.style.transformOrigin = 'left'
        },
        enter: function (el, done) {
          Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
          Velocity(el, { fontSize: '1em' }, { complete: done })
        },
        leave: function (el, done) {
          Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
          Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
          Velocity(el, {
            rotateZ: '45deg',
            translateY: '30px',
            translateX: '30px',
            opacity: 0
          }, { complete: done })
        }
      }
    })
  </script>
</body>
</html>
案例效果

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡，说白了就是在第一次渲染的时候才会起作用的动画效果。
这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名实现初始渲染过渡：

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

或是自定义 JavaScript 钩子实现初始渲染过渡：

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

案例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>初始渲染的过渡</title>
 <script src="node_modules/vue/dist/vue.js"></script>
</head>
<style>
 .custom-appear-active{
  color: #2fe26d;
  background: #b6b6b6;
  transition: all 2s ease;
 }
 .custom-appear{
  font-size: 40px;
  color: #e069e2;
  background: #7798e2;
 }
 .custom-appear-to{
  color: #e29138;
  background: #1c8942;
 }
</style>
<body>
<div id="app">
 <transition
   appear
   appear-class="custom-appear"
   appear-to-class="custom-appear-to"
   appear-active-class="custom-appear-active"
 >
  <p>appear</p>
 </transition>
</div>
<script>
 new Vue({
  el: "#app"
 })
</script>
</body>
</html>
初始渲染的过渡

多个元素的过渡

最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

可以这样使用，但是有一点需要注意：

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。
示例：

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如：

<transition>
  <button v-if="docState === 'saved'" key="saved">
    Edit
  </button>
  <button v-if="docState === 'edited'" key="edited">
    Save
  </button>
  <button v-if="docState === 'editing'" key="editing">
    Cancel
  </button>
</transition>

可以重写为：

<transition>
  <button v-bind:key="docState">
    {{ buttonMessage }}
  </button>
</transition>
// ...
computed: {
  buttonMessage: function () {
    switch (this.docState) {
      case 'saved': return 'Edit'
      case 'edited': return 'Save'
      case 'editing': return 'Cancel'
    }
  }
}

过渡模式

如下例子：在 “on” 按钮和 “off” 按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>多个元素过渡</title>
    <style>
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active{
        transition: opacity .5s;
      }
    </style>
</head>
<body>
  <div id="app">
    <transition>
      <button v-bind:key="isSwitch" @click="isSwitch=!isSwitch">
        {{ isSwitch ? 'on' : 'off' }}
      </button>
    </transition>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        isSwitch: true
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

如果我们让在元素绝对定位在彼此之上：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>多个元素过渡</title>
    <style>
      .warp {
        position: relative;
        height: 18px
      }
      .wrap button {
        position: absolute;
      }
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active{
        transition: opacity .5s;
      }
    </style>
</head>
<body>
  <div id="app">
    <div class='wrap'>
      <transition>
        <button v-bind:key="isSwitch" @click="isSwitch=!isSwitch">
          {{ isSwitch ? 'on' : 'off' }}
        </button>
      </transition>
    </div>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        isSwitch: true
      }
    }).$mount('#app')
  </script>
</body>
</html>

那么就可以有这样更为正常的效果：


运行结果

我们加上 translate 让它们运动像滑动过渡：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>多个元素过渡</title>
    <style>
      .warp {
        position: relative;
        height: 18px;
      }
      .wrap button {
        position: absolute;
        margin:30px;
      }
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active{
        transition: all 1s;
      }
      .v-enter {
        transform: translateX(31px);
      }
      .v-leave-active {
        transform: translateX(-31px);
      }
    </style>
</head>
<body>
  <div id="app">
    <div class='wrap'>
      <transition>
        <button v-bind:key="isSwitch" @click="isSwitch=!isSwitch">
          {{ isSwitch ? 'on' : 'off' }}
        </button>
      </transition>
    </div>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        isSwitch: true
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式：

  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
    用 out-in 重写之前的开关按钮过渡：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>多个元素过渡</title>
    <style>
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active{
        transition: opacity .5s;
      }
    </style>
</head>
<body>
  <div id="app">
    <transition mode='out-in'>
      <button v-bind:key="isSwitch" @click="isSwitch=!isSwitch">
        {{ isSwitch ? 'on' : 'off' }}
      </button>
    </transition>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        isSwitch: true
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

in-out 滑动淡出demo如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>多个元素过渡</title>
    <style>
      .wrap {
        position: relative;
        height: 18px;
      }
      .wrap button {
        position: absolute;
        margin-left: 30px;
      }
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active{
        transition: all .5s;
      }
      .v-enter {
        transform: translateX(31px);
      }
      .v-leave-active {
        transform: translateX(-31px);
      }
    </style>
</head>
<body>
  <div id="app">
    <div class="wrap">
      <transition mode='in-out'>
        <button v-bind:key="isSwitch" @click="isSwitch=!isSwitch">
          {{ isSwitch ? 'on' : 'off' }}
        </button>
      </transition>
    </div>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        isSwitch: true
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

多个组件过渡

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反，我们只需要使用动态组件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>多个组件过渡</title>
    <style>
      .v-enter,
      .v-leave-to {
        opacity: 0;
      }
      .v-enter-active,
      .v-leave-active{
        transition: opacity .3s ease;
      }
    </style>
</head>
<body>
  <div id="app">
    <div class="wrap">
      <input type="radio" id="v-a" value="v-a" v-model="view">
      <label for="v-a">A</label>
      <input type="radio" id="v-b" value="v-b" v-model="view">
      <label for="v-b">B</label>
      <transition mode="out-in">
        <component v-bind:is="view"></component>
      </transition>
    </div>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        view: 'v-a'
      },
      components: {
        'v-a': {
          template:'<div>Component A</div>'
        },
        'v-b': {
          template:'<div>Component B</div>'
        }
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

列表过渡

  • 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup。
  • 通过 为 transition-group 元素，设置 tag 属性，可以指定 transition-group 渲染为指定的元素。如果不指定 tag 属性，默认渲染为 <span> 标签。
  • 列表渲染时，过渡模式不可用，因为我们不再相互切换特有的元素。
  • 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性。

列表的进入、离开过渡

下面是一个列表的进入、离开的简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>列表过渡</title>
</head>
<style>
  .list-item {
    display: inline-block;
    margin-right: 10px;
  }
  .v-enter,
  .v-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }
  .v-enter-active,
  .v-leave-active {
    transition: all 1s;
  }
</style>
<body>
  <div id="app">
    <button @click="add">Add</button>
    <button @click="remove">Remove</button>
    <transition-group tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        items: [1,2,3,4,5,6,7,8,9],
        nextNum: 10
      },
      methods: {
        randomIndex() {
          return Math.floor(Math.random()*this.items.length)
        },
        add() {
          this.items.splice(this.randomIndex(),0,this.nextNum++)
        },
        remove() {
          this.items.splice(this.randomIndex(), 1)
        }
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

不过，这个例子有个问题，当添加和移除元素的时候，周围的元素会瞬间移动到他们的新布局的位置，而不是平滑的过渡，我们下面会解决这个问题。

列表的排序过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>列表的排序过渡</title>
</head>
<style>
  .flip-list-move {
    transition: transform 1s
  }
</style>
<body>
  <div id="app">
    <button v-on:click="shuffle">Shuffle</button>
    <transition-group name="flip-list" tag="ul">
      <li v-for="item in items" v-bind:key="item">
        {{ item }}
      </li>
    </transition-group>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/lodash/lodash.min.js"></script>
  <script>
    const app = new Vue({
      data: {
        items: [1,2,3,4,5,6,7,8,9]
      },
      methods: {
        shuffle () {
          this.items = _.shuffle(this.items)          
        }
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

这个看起来很神奇，内部的实现，Vue 使用了一个叫 FLIP 简单的动画队列
使用 transforms 将元素从之前的位置平滑过渡新的位置。

我们将之前实现的例子和这个技术结合，使我们列表的一切变动都会有动画过渡。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>列表过渡</title>
</head>
<style>
  .list-item {
    display: inline-block;
    margin-right: 10px;
  }
  .flip-list-enter,
  .flip-list-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  .flip-list-enter-active,
  .flip-list-leave-active {
    transition: all 1s;
  }
  .flip-list-move {
    transition: transform 1s
  }

</style>
<body>
  <div id="app">
    <button @click="shuffle">Shuffle</button>
    <button @click="add">Add</button>
    <button @click="remove">Remove</button>
    <transition-group name="flip-list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/lodash/lodash.min.js"></script>
  <script>
    const app = new Vue({
      data: {
        items: [1,2,3,4,5,6,7,8,9],
        nextNum: 10
      },
      methods: {
        randomIndex() {
          return Math.floor(Math.random()*this.items.length)
        },
        add() {
          this.items.splice(this.randomIndex(),0,this.nextNum++)
        },
        remove() {
          this.items.splice(this.randomIndex(), 1)
        },
        shuffle() {
          this.items=_.shuffle(this.items)
        }
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中。

列表的交错过渡

通过 data 属性与 JavaScript 通信 ，就可以实现列表的交错过渡

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>列表的交错过渡</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <div id="app">
    <input v-model="query">
    <transition-group
      tag="ul"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave">
      <li v-for="(item,index) in computedList"
          :key="item.msg"
          :data-index="index"
          >
        {{ item.msg }}
      </li>
    </transition-group>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        query: '',
        list: [
          { msg: 'Bruce Lee' },
          { msg: 'Jackie Chan' },
          { msg: 'Chuck Norris' },
          { msg: 'Jet Li' },
          { msg: 'Kung Fury' }
        ]
      },
      methods: {
        beforeEnter(el) {
          el.style.opacity = 0
          el.style.height = 0
        },
        enter(el, done) {
          var delay = el.dataset.index * 150
          setTimeout(function () {
            Velocity(
              el, 
              { opacity:1, height:'1.6em' },
              { complete: done }
            )
          }, delay)
        },
        leave(el, done) {
          var delay = el.dataset.index*150
          setTimeout( function () {
            Velocity(el,
            { opacity: 0, height: 0 },
            { complete: done }
            )
          },delay)
        }
      },
      computed: {
        computedList: function() {
          var vm = this
          return this.list.filter(function (item) {
            return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
          })
        }
      }
    }).$mount('#app')
  </script>
</body>
</html>
运行结果

可复用的过渡

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 <transition> 或者 <transition-group> 作为根组件，然后将任何子组件放置在其中就可以了。
使用 template 的简单例子：

Vue.component('my-special-transition', {
  template: '
    <transition
      name="very-special-transition"
      mode="out-in"
      v-on:before-enter="beforeEnter"
      v-on:after-enter="afterEnter"
    >
      <slot></slot>
    </transition>
  ',
  methods: {
    beforeEnter: function (el) {
      // ...
    },
    afterEnter: function (el) {
      // ...
    }
  }
})

函数式组件更适合完成这个任务：

Vue.component('my-special-transition', {
  functional: true,
  render: function (createElement, context) {
    var data = {
      props: {
        name: 'very-special-transition',
        mode: 'out-in'
      },
      on: {
        beforeEnter: function (el) {
          // ...
        },
        afterEnter: function (el) {
          // ...
        }
      }
    }
    return createElement('transition', data, context.children)
  }
})

动态过渡

在 Vue 中即使是过渡也是数据驱动的！动态过渡最基本的例子是通过 name 特性来绑定动态值。

<transition v-bind:name="transitionName">
  <!-- ... -->
</transition>

当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用。

所有过渡特性都可以动态绑定，但我们不仅仅只有特性可以利用，还可以通过事件钩子获取上下文中的所有数据，因为事件钩子都是方法。这意味着，根据组件的状态不同，你的 JavaScript 过渡会有不同的表现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>动态过渡</title>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

  <div id="app" class="demo">
    Fade In: <input type="range" v-model="fadeInDuration" min="0" v-bind:max="maxFadeDuration">
    Fade Out: <input type="range" v-model="fadeOutDuration" min="0" v-bind:max="maxFadeDuration">
    <transition
      v-bind:css="false"
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
    >
      <p v-if="show">hello</p>
    </transition>
    <button
      v-if="stop"
      v-on:click="stop = false; show = false"
    >Start animating</button>
    <button
      v-else
      v-on:click="stop = true"
    >Stop it!</button>
  </div>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      data: {
        show: true,
        fadeInDuration: 1000,
        fadeOutDuration: 1000,
        maxFadeDuration: 1500,
        stop: true
      },
      mounted: function () {
        this.show = false
      },
      methods: {
        beforeEnter: function (el) {
          el.style.opacity = 0
        },
        enter: function (el, done) {
          var vm = this
          Velocity(el,
            { opacity: 1 },
            {
              duration: this.fadeInDuration,
              complete: function () {
                done()
                if (!vm.stop) vm.show = false
              }
            }
          )
        },
        leave: function (el, done) {
          var vm = this
          Velocity(el,
            { opacity: 0 },
            {
              duration: this.fadeOutDuration,
              complete: function () {
                done()
                vm.show = true
              }
            }
          )
        }
      }
    }).$mount('#app')
  </script>
</body>
</html>
执行结果
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349

推荐阅读更多精彩内容

  • Vue.js 2.0 Official Guide Note
    这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容，还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,046评论 0赞 29
  • Vue.js 1.0 Official Guide Note
    Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性：var data = { a:...
    云之外阅读 2,204评论 0赞 6
  • Vue现代化使用方法(三)
    混合 组件系统是Vue的核心，如何合理的规划组件，是我们在开发中需要深入思考的问题，我个人习惯把一些组件使用逻辑和...
    li4065阅读 842评论 0赞 1
  • 当你老了
    当你老了 华发郁积 皱纹横生 体态臃肿 是否还有那么一个人 爱你雍容愉悦的时刻 爱你苍老体弱的时刻 爱你的所有时刻？
    随风飘摇阅读 327评论 0赞 0
  • 狗十三|成长就是被驯服的过程
    最近，听好多朋友给我安利《狗十三》，让我一定要去看。不知道是我们选的场次问题还是怎么了，全场只有我和朋友还有一对夫...
    走丢的灵魂阅读 727评论 0赞 6