vue过渡动画

概述

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

在 CSS 过渡和动画中自动应用 class

可以配合使用第三方 CSS 动画库，如 Animate.css

在过渡钩子函数中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 动画库，如 Velocity.js

css实现过渡

<transition></transition>这个标签是vue的内置组件，可以直接使用，将需要动画的元素包裹在内，但是实现效果还是得靠css样式来实现，具体动画是这么样的实在哎css样式中写，vue只是提供了这么个框架

其中name属性可以任意起名，但是需要跟css中的类名前面的第一个单词匹配

过渡的类名：xxx-enter-active: 指定显示的transition，xxx-leave-active: 指定隐藏的transition，xxx-enter: 指定隐藏时的样式

css实现过渡动画的简单示例一：当点击按钮切换的时候，css有个这样的切换过程

第一个样式是指定过渡样式，第二个样式是指定隐藏时的样式

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-show="show">i am show</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
</script>
<style>
  .fade-enter-active, .fade-leave-active{
    transition: opacity 1s;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>

css实现过渡动画的简单示例二

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-show="show">i am show</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
</script>
<style>
  .fade-enter-active, .fade-leave-active{
    transition: opacity 2s ease-out;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
  /*进入*/
  .fade-enter{
    transform: translateY(-500px);
  }
  /*出去*/
  .fade-leave-active{
    transform: translateY(500px);
  }
</style>

多元素模式接受的过渡状态—v-show的过渡状态／v-if的过渡状态

v-if和v-show的区别在于v-if从dom中去除，v-show只是将dom使用css样式display:none隐藏掉

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <!--mode表示多元素模式，out-in（先出后进）in-out(先进后出)-->
    <transition-group name="fade" mode="out-in">
      <!--多元素模式下，使用transition-group标签，并且需要一个key来标识-->
      <p v-if="show" key="1">i am if</p>
      <p v-else key="2">i am show</p>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
</script>
<style>
  .fade-enter-active, .fade-leave-active{
    transition: opacity 2s ease-out;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <!--mode表示多元素模式，out-in（先出后进）in-out(先进后出)-->
    <transition-group name="fade" mode="out-in">
      <!--多元素模式下，使用transition-group标签，并且需要一个key来标识，实际开发中这个key一般是数组的下标，最好是用v-bind来绑定-->
      <p v-show="show" key="1">i am if</p>
      <p v-show="!show" key="2">i am show</p>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
</script>
<style>
  .fade-enter-active, .fade-leave-active{
    transition: opacity 2s ease-out;
  }
  .fade-enter, .fade-leave-to{
    opacity: 0;
  }
</style>

多元素过渡和多元素过渡模式（接受的过渡状态—动态组件切换的过渡动画）

css实现动画

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="bounce">
      <p v-if="show" style="display: inline-block">Lorem</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      show: true
    }
  }
}
</script>
<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>