Vue?動畫效果、過渡效果的示例代碼

更新時間：2022年04月13日 10:53:04 作者：Errol_King

這篇文章主要介紹了Vue?動畫效果、過渡效果,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

動畫效果

新建 Test.vue

<template>
  <div>
    <button @click="isShow = !isShow">顯示/隱藏</button>
    <transition>
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
h1 {
  background-color: orange;
}

.v-enter-active{
  animation: myAni 1s;
}

.v-leave-active{
  animation: myAni 1s reverse;
}

@keyframes myAni {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}
</style>

App.vue

<template>
  <div>
    <Test/>
  </div>
</template>

<script>
//引入組件
import Test from "./components/Test";

export default {
  name: 'App',
  components: {
    Test
  }
}
</script>

<style>
</style>

注意點(diǎn)
1、如果給 transition 標(biāo)簽增加了 name 屬性

<transition name="hello">
	<h1 v-show="isShow">你好 Vue</h1>
</transition>

那么動畫過渡類名也需要修改：

.hello-enter-active{
  animation: myAni 1s;
}

.hello-leave-active{
  animation: myAni 1s reverse;
}

2、如果想讓程序一執(zhí)行就執(zhí)行一次動畫，那么需要增加 appear

注意 appear 前要有冒號，不寫冒號就相當(dāng)于一個普通屬性，值是字符串是 “true”

<transition :appear="true">
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>

或者簡寫

<transition>
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>

過渡效果

單個元素

復(fù)制一份 Test.vue 重命名為 Test2.vue，記得 App 中注冊使用

<template>
  <div>
    <button @click="isShow = !isShow">顯示/隱藏</button>
    <transition appear>
      <h1 v-show="isShow">你好 Vue</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
h1 {
  background-color: orange;
  /*transition:  0.5s linear;*/
}

/*進(jìn)入的起點(diǎn)，離開的終點(diǎn)*/
.v-enter, .v-leave-to {
  transform: translateX(-100%);
}
/*進(jìn)入的過程，離開的過程*/
.v-enter-active, .v-leave-active {
  transition: 0.5s linear;
}
/*進(jìn)入的終點(diǎn)，離開的起點(diǎn)*/
.v-enter-to, .v-leave {
  transform: translateX(0);
}
</style>

多個元素

<transition-group>
      <h1 v-show="isShow" key="1">你好 Vue</h1>
      <h1 v-show="!isShow" key="2">閉關(guān)修煉 沉迷學(xué)習(xí)</h1>
    </transition-group>

Animate.css

根據(jù) 官網(wǎng) 的使用教程安裝、引入、使用即可

1、復(fù)制一個 Test2.vue 重命名為 Test3.vue，并在 App 中引入使用
2、安裝 Animate.css，運(yùn)行 npm install animate.css執(zhí)行安裝
3、Test3.vue 中引入，import 'animate.css';
4、transition-group 標(biāo)簽中增加 name="animate__animated animate__bounce"
5、增加一個動畫，例如我們增加一個進(jìn)入動畫 enter-active-class="animate__swing"，再增加一個離開動畫

其中官網(wǎng)右側(cè)列出了動畫名，點(diǎn)擊可查看效果，同時后邊可以復(fù)制動畫名

Test3.vue 完整代碼

<template>
  <div>
    <button @click="isShow = !isShow">顯示/隱藏</button>
    <transition-group
        appear
        name="animate__animated animate__bounce"
        enter-active-class="animate__swing"
        leave-active-class="animate__backOutUp"
        >
      <h1 v-show="isShow" key="1">你好 Vue</h1>
      <h1 v-show="!isShow" key="2">閉關(guān)修煉 沉迷學(xué)習(xí)</h1>
    </transition-group>
  </div>
</template>

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

<style scoped>
h1 {
  background-color: orange;
}
</style>

查看效果：

總結(jié)

Vue 封裝的過渡與動畫
1.作用：在插入、更新或移除DOM元素時，在合適的時候給元素添加樣式類名
2.圖示：

摘自 Vue 官網(wǎng)

3.寫法：
1）準(zhǔn)備好樣式：

元素進(jìn)入的樣式:

1.v-enter進(jìn)入的起點(diǎn)
2.v-enter-active進(jìn)入過程中
3.v-enter-to進(jìn)入的終

元素離開的樣式：

1.v-leave離開的起點(diǎn)
2.v-leave-active離開過程中
3.v-leave-to離開的終點(diǎn)

2）使用<transition>包裹要過度的元素，并配置name屬性：<transition name="hello">(可選)

3.備注：若有多個元素需要過度，則需要使用<transition-group>，且每個元讀都要指定 key 值

todolist 增加動畫效果

現(xiàn)在給增加和刪除增加動畫效果，所以修改 Item.vue 用 <transition>標(biāo)簽包裹，然后增加動畫即可

<template>
  <transition name="todo" appear>
	......
    </li>
  </transition>
</template>

<script>
......
</script>

<style scoped>
......

.todo-enter-active {
  animation: myAni 1s;
}

.todo-leave-active {
  animation: myAni 1s reverse;
}

@keyframes myAni {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

查看效果