7. Vue 动画

作者: 璎珞纨澜 | 来源:发表于2019-06-10 18:05 被阅读0次

7. Vue 动画
Vue中的动画
九:vue.js基础(2)
前端系统学习 10. Vue高级用法
vue的动画特效
Vue动画
Vue神一般的打开姿势
Vue动画
五、Vue动画 ------ 2020-05-07
2021-01-08

官网参考链接

为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能。在 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 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 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>

执行结果

7. Vue 动画
官网参考链接为什么要有动画：动画能够提高用户的体验，帮助用户更好的理解页面中的功能。在 Vue 中有以下四种方式...
Vue中的动画
Vue动画 Vue动画API 定义不同的名称动画第三方动画库Animate.css和Vue的结合使用 enter...
九:vue.js基础(2)
1.表单输入绑定 2.Vue实例_生命周期 3.过渡. 4.动画 5.过滤器 6.内置指令 7.自定义指令
前端系统学习 10. Vue高级用法
Vue 高级用法动画特效 transition 实现路由切换动画 App.vue Home -> List ->...
vue的动画特效
一、Vue中的CSS动画原理transition标签二、Vue中的JS动画与velocity.js 三、Vue中...
Vue动画
vue动画 1. vue不能直接实现动画,只提供动画各阶段需要的class 2. 组件提供...
Vue神一般的打开姿势
过渡&动画 vue 动画的理解 1）操作 css 的 trasition 或 animation2）vue 会给目...
Vue动画
Vue动画 Vue动画 CSS transition 在进入/离开的过渡中，会有 6 个 class 切换。对于...
五、Vue动画 ------ 2020-05-07
1、常见的能触发动画的操作及添加动画的方式 2、Vue动画的基本使用：通过添加CSS样式使用 3、Vue动画的基本...
2021-01-08
Vue过渡和动画 Vue过渡和动画官方文档[https://cn.vuejs.org/v2/guide/trans...

7. Vue 动画

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

CSS 过渡

CSS 动画

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

三、钩子函数实现动画

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

初始渲染的过渡

多个元素的过渡

过渡模式

多个组件过渡

列表过渡

列表的进入、离开过渡

列表的排序过渡

列表的交错过渡

可复用的过渡

动态过渡

相关文章

7. Vue 动画

Vue中的动画

九:vue.js基础(2)

前端系统学习 10. Vue高级用法

vue的动画特效

Vue动画

Vue神一般的打开姿势

Vue动画

五、Vue动画 ------ 2020-05-07

2021-01-08

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读