Vue 笔记 05

Vue封装的过渡与动画

作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名

---

动画的实现方式：

1. 定义关键帧
2. 在指定的class中定义动画
3. 给需要动画的DOM元素添加 transition 标签（如果要给多个元素指定相同动画，要将需要动画的所有元素放在 transition-group标签中，并且要给每一个元素绑定一个不相同的key属性值）

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- appear属性：实现动画自动播放 -->
    <transition name="dudu" appear>
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

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

<style scoped>
h1 {
     
  background-color: aquamarine;
}
/* 指定进入的样式：第一个单词对应transition标签的name属性值 */
.dudu-enter-active {
     
  animation: dudu 1s linear;
}
/* 指定离开的样式：第一个单词对应transition标签的name属性值 */
.dudu-leave-active {
     
  animation: dudu 1s linear reverse;
}
@keyframes dudu {
     
  from {
     
    transform: translateX(-100%);
  }
  to {
     
    transform: translateX(0);
  }
}
</style>

多个元素的动画实现

<transition-group name="dudu" appear>
  <h1 v-show="!isShow" key="1">你好啊！</h1>
  <h1 v-show="isShow" key="2">你好啊！</h1>
</transition-group>

---

过渡的实现方式

<style scoped>
h1 {
     
  background-color: aquamarine;
  transition: 1s linear;
}
/* 进入的起点 离开的终点 */
.dudu-enter,
.dudu-leave-to {
     
  transform: translateX(-100%);
}
/* 进入的终点 离开的起点 */
.dudu-enter-to,
.dudu-leave {
     
  transform: translateX(0);
}
</style>

为了将过渡的实现与其他样式分开，可以将过渡的相关参数在 v-enter-active和 v-leave-active 实现

/* 指定过渡的相关参数 */
.dudu-enter-active,
.dudu-leave-active {
   
  transition: 1s linear;
}

---

第三方库实现动画

1. 安装 npm i animate.css
2. 引入 import "animate.css";
3. 使用参照官方网站

<template>
  <div>
    <button