一、 實(shí)現(xiàn)原理

在插入、更新、移除 DOM 元素時(shí)，在合適的時(shí)候給元素添加樣式類名，配合 CSS 樣式使用，實(shí)現(xiàn)動(dòng)畫效果。

通俗來(lái)講，就是將要進(jìn)行動(dòng)畫操作的 DOM 元素用 transition 標(biāo)簽包裹起來(lái)。在此html元素運(yùn)動(dòng)前，運(yùn)動(dòng)中，運(yùn)動(dòng)后這三個(gè)時(shí)候 vue 會(huì)給此 DOM 元素添加不同的 class ，然后配合 CSS 樣式，實(shí)現(xiàn)動(dòng)畫效果。

示例：

<template>
  <div>
    <button @click="bol = !bol">隱藏/顯示</button>
    <!-- Vue 的內(nèi)置動(dòng)畫標(biāo)簽 transition -->
    <transition>
      <!-- 只能包含 1 個(gè)元素 -->
      <h1 v-show="bol">組件動(dòng)畫效果</h1>
      <!-- 需要設(shè)置 v-show / v-if 屬性控制元素的顯示 -->
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style>
/* 進(jìn)入：始狀態(tài) */
.v-enter {
  transform: translateX(-100%);
  color: red;
}
/* 進(jìn)入：末狀態(tài) */
.v-enter-to {
  transform: translateX(0);
  color: yellow;
}
/* 進(jìn)入動(dòng)畫 */
.v-enter-active {
  transition: 10s;
  color: linear-gradient(red,yellow);;
}

/* 離開：始狀態(tài) */
.v-leave {
  transform: translateX(0);
}
/* 離開：末狀態(tài) */
.v-leave-to {
  transform: translateX(-100%);
}
/* 離開動(dòng)畫 */
.v-leave-active {
  transition: 1s;
}
</style>

二、 transition 標(biāo)簽

• Vue 的內(nèi)置動(dòng)畫標(biāo)簽: transition
• transition 標(biāo)簽只能包含 1 個(gè)元素；如果里面寫了多個(gè)元素，則只生效第一個(gè)
• transition 包裹的標(biāo)簽需要設(shè)置 v-show / v-if 屬性控制元素的顯示

三、 動(dòng)畫 CSS 樣式對(duì)應(yīng)的類名

• 進(jìn)入：.v-enter 始狀態(tài)、.v-enter-to 末狀態(tài)、.v-enter-active 進(jìn)入動(dòng)畫
• 離開：.v-leave 始狀態(tài)、.v-leave-to 末狀態(tài)、.v-leave-active 離開動(dòng)畫
• .v-enter 、 .v-leave 定義了動(dòng)畫的初始狀態(tài)，在里面可以定義初始的位置，顏色，字體等。
• .v-enter-to 、 .v-leave-to 定義了動(dòng)畫的最終狀態(tài)，這兩個(gè)類的定義最好和 DOM 的 class保持一致，否則動(dòng)畫結(jié)束后會(huì)瞬間從 .v-enter-to 、 .v-leave-to 的樣式轉(zhuǎn)變?yōu)?DOM 的樣式（實(shí)例一，實(shí)例二）
• .v-enter-active 、 .v-leave-active 定義了動(dòng)畫的漸變規(guī)則，比如是位置漸變的話會(huì)定義漸變的時(shí)間，路徑；顏色漸變的話會(huì)定義顏色相關(guān)的漸變規(guī)則

3.1 實(shí)例一

會(huì)從紅色漸變?yōu)辄S色

<template>
    <div>
      <button @click="bol = !bol">隱藏/顯示</button>
      <transition>
        <h1 v-show="bol" class="demo">組件動(dòng)畫效果</h1>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
    name: "TestDemo",
    data() {
      return { bol: true };
    },
  };
  </script>
  
  <style>
  .v-enter-active,
  .v-leave-active {
    transition: 10s !important;
    color: linear-gradient(red,yellow) !important;
  }

  .demo {
    color: yellow;
  }

  .v-enter,
  .v-leave-to {
    transform: translateX(-50%);
    color: red;
  }
  </style>

3.2 實(shí)例二

會(huì)從紅色漸變?yōu)辄S色，然后瞬間變?yōu)楹谏?/p>

<template>
  <div>
    <button @click="bol = !bol">隱藏/顯示</button>
    <transition>
      <h1 v-show="bol" class="demo">組件動(dòng)畫效果</h1>
    </transition>
  </div>
</template>
  
  <script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>
<style>
.v-enter,
.v-leave-to {
  transform: translateX(-50%);
  color: red;
}

.v-enter-to,
.v-leave {
  transform: translateX(0);
  color: yellow;
}

.v-enter-active,
.v-leave-active {
  transition: 10s !important;
  color: linear-gradient(red, yellow) !important;
}
</style>

四、 transition 標(biāo)簽的屬性

4.1 name 屬性

用于自動(dòng)生成 CSS 動(dòng)畫類名

• 如果 transition 標(biāo)簽元素沒(méi)有設(shè)置 name 屬性，則對(duì)應(yīng)的動(dòng)畫類名為 v-XXX
• 果設(shè)置了 name 屬性，則對(duì)應(yīng)的動(dòng)畫類名為 屬性值-XXX
• 當(dāng)存在多個(gè) tansition 標(biāo)簽時(shí)，我們可以通過(guò) name 屬性給各個(gè) transition 標(biāo)簽指定不同的 CSS 動(dòng)畫效果

4.2 appear 屬性

一開始就生效顯示動(dòng)畫文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-775415.html

4.3 mode 屬性

• in-out： 新元素先進(jìn)行過(guò)渡，完成之后當(dāng)前元素過(guò)渡離開
• out-in： 當(dāng)前元素先進(jìn)行過(guò)渡，完成之后新元素過(guò)渡進(jìn)入

4.4 示例

<template>
  <div>
    <button @click="bol = !bol">隱藏/顯示</button>
    <!-- Vue 的內(nèi)置動(dòng)畫標(biāo)簽 transition -->
    <transition name="test" appear>
      <!-- 只能包含 1 個(gè)元素 -->
      <h1 v-show="bol">組件動(dòng)畫效果</h1>
      <!-- 需要設(shè)置 v-show / v-if 屬性控制元素的顯示 -->
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style>
.test-enter,
.test-leave-to {
  transform: translateX(-50%);
  color: red;
}

.test-enter-to,
.test-leave {
  transform: translateX(0);
  color: yellow;
}

.test-enter-active,
.test-leave-active {
  transition: 10s !important;
  color: linear-gradient(red,yellow) !important;
}
</style>

五、 transition-group 標(biāo)簽

• transition 標(biāo)簽只能包含 1 個(gè)元素、 transition-group 標(biāo)簽可以包含多個(gè)元素
• transition-group 標(biāo)簽里面的元素需要設(shè)置 key 屬性，作為當(dāng)前元素的唯一標(biāo)識(shí)
• 除此之外，其它用法都和 transition 標(biāo)簽一樣

<template>
  <div id="app">
    <button @click="isEditing = !isEditing">切換</button>
    <transition-group appear>
      <h1 v-if="isEditing" key="save">Save</h1>
      <h1 v-if="!isEditing" key="edit">Edit</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { isEditing: true };
  },
};
</script>

<style>
h1 {
  transition: 3s;
  position: absolute;
}
.v-leave {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-enter {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
</style>

六、 JavaScript鉤子函數(shù)

      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
  methods: {
    
  // --------
  // 進(jìn)入中
  // --------

  beforeEnter: function (el) {
    console.log('beforeEnter');
    console.log(el);
  },
  // 當(dāng)與 CSS 結(jié)合使用時(shí)
  // 回調(diào)函數(shù) done 是可選的
  enter: function (el, done) {
    console.log('enter');
    console.log(el);
    done()
  },
  afterEnter: function (el) {
    console.log('afterEnter');
    console.log(el);
  },
  enterCancelled: function (el) {
    console.log('enterCancelled');
    console.log(el);
  },

  // --------
  // 離開時(shí)
  // --------

  beforeLeave: function (el) {
    console.log('beforeLeave');
    console.log(el);
  },
  leave: function (el, done) {
    console.log('leave');
    console.log(el);
    done()
  },
  afterLeave: function (el) {
    console.log('afterLeave');
    console.log(el);
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    console.log('leaveCancelled');
    console.log(el);
  }
  },

七、 vue實(shí)現(xiàn)動(dòng)畫的多種方法

7.1 transition

<template>
  <div>
    <button @click="bol = !bol">隱藏/顯示</button>
    <transition name="fade">
      <p v-if="bol">hello</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
  width: 100px;
}
p {
  border: 1px solid red;
  width: 300px;
}
</style>

7.2 animation + @keyframes

<template>
  <div>
    <button @click="bol = !bol">隱藏/顯示</button>
    <transition name="bounce">
      <p v-show="bol" class="demo">組件動(dòng)畫效果</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TestDemo",
  data() {
    return { bol: 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>

7.3 animate.css

1. 安裝：npm install animate.css
2. 引入樣式庫(kù)：import "animate.css"
3. 給指定的 transition 標(biāo)簽添加 name 屬性 animate_animate、animate__bounce
4. 配置 enter-active-class 屬性，指定進(jìn)入動(dòng)畫：在樣式庫(kù)中挑一個(gè)進(jìn)入的樣式值，作為 enter-active-class 屬性值
5. 配置 leave-active-class 屬性，指定退出動(dòng)畫：在樣式庫(kù)中挑一個(gè)退出的樣式值，作為 leave-active-class 屬性值

<template>
  <div>
    <button @click="bol = !bol">隱藏/顯示</button>
    <transition
      name="animate__animated animate__bounce"
      enter-active-class="animate__bounceIn"
      leave-active-class="animate__bounceOut"
    >
      <p v-show="bol" name="animate_animate">組件動(dòng)畫效果</p>
    </transition>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "TestDemo",
  data() {
    return { bol: true };
  },
};
</script>

7.4 JavaScript鉤子

1. 當(dāng)只用 JavaScript 過(guò)渡時(shí)，在 enter 和 leave 中必須使用 done 進(jìn)行回調(diào)。否則，它們將被同步調(diào)用，過(guò)渡會(huì)立即完成。
2. 推薦對(duì)于僅使用 JavaScript 過(guò)渡的元素添加 v-bind:css="false"，Vue 會(huì)跳過(guò) CSS 的檢測(cè)。這也可以避免過(guò)渡過(guò)程中 CSS 的影響。

7.5 Velocity.js

1. 安裝：npm install velocity-animate

<template>
  <div id="app">
    <button @click="show = !show">顯示/隱藏</button>
    <br />
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-show="show">hello</p>
    </transition>
  </div>
</template>

<script>
import Velocity from "velocity-animate";

export default {
  name: "App",
  data: function () {
    return {
      show: true,
    };
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0;
    },
    enter: function (el, done) {
      Velocity(
        el,
        {
          rotateZ: "0deg",
          translateY: "0px",
          translateX: "0px",
          opacity: 1,
        },
        { complete: done }
      );
    },
    leave: function (el, done) {
      Velocity(
        el,
        {
          rotateZ: "45deg",
          translateY: "30px",
          translateX: "30px",
          opacity: 0,
        },
        { complete: done }
      );
    },
  },
};
</script>

7.6 多個(gè)元素的過(guò)渡

<template>
  <div id="example-2">
    <transition name="fade" mode="out-in">
      <button v-if="isEditing" key="save" @click="isEditing = !isEditing">
        Save
      </button>
      <button v-else key="edit" @click="isEditing = !isEditing">Edit</button>
    </transition>
  </div>
</template>

<script>
export default {
  name: "TransitionTest",
  data() {
    return {
      name: "TransitionTest",
      isEditing: false,
    };
  }
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

#example-2 {
  position: relative;
  padding: 100px;
}
#example-2 button {
  position: absolute;
}
</style>

7.7 多個(gè)組件的過(guò)渡

<template>
  <div id="transition-components-demo">
    <button @click="view = 'VA'">a</button>
    <button @click="view = 'VB'">b</button>
    <transition name="component-fade" mode="out-in">
      <component v-bind:is="view"></component>
    </transition>
  </div>
</template>

<script>
import VA from "./VA.vue";
import VB from "./VB.vue";

export default {
  name: "TransitionTest",
  data() {
    return {
      view: "VA",
    };
  },
  components: {
    VA,
    VB,
  },
};
</script>
<style scoped>
.component-fade-enter-active,
.component-fade-leave-active {
  transition: opacity 2s ease;
}
.component-fade-enter,
.component-fade-leave-to {
  opacity: 0;
}
</style>

7.8 for循環(huán)怎么動(dòng)畫 （列表的進(jìn)入/離開過(guò)渡）

<template>
  <div id="list-demo" class="demo">
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" :key="item" class="list-item">
        {{ item }}
      </span>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "TransitionTest",
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10,
    };
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length);
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1);
    },
  },
};
</script>
<style scoped>
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

參考

• 【Vue】transition 標(biāo)簽的使用
• Vue之transition
• 過(guò)渡 & 動(dòng)畫

到了這里，關(guān)于vue 動(dòng)畫（transition）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！