Vue知识点整理（三）- Vue脚手架（7）- 动画效果

目录

一、Vue封装的过度与动画

二、动画效果 - 案例练习

三、过度效果 - 案例练习

四、多个元素过度

五、集成第三方动画

六、TodoList案例添加动画效果

---

一、Vue封装的过度与动画

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

2. 图示：

3. 写法：

（1） 准备好样式：

元素进入的样式：

        1. v-enter：进入的起点

        2. v-enter-active：进入过程中

        3. v-enter-to：进入的终点

元素离开的样式：

        1. v-leave：离开的起点

        2.v-leave-active：离开的过程中

        3.v-leave-to：离开的终点 

（2）使用 <transition>标签包裹过度的元素，并配置name属性：

<transition name="test1">
    <h1 v-show="isShow">Hello World</h1>
</transition>

（3）注意：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值

二、动画效果 - 案例练习

App.vue 中 引入Test1组件，并使用Test1组件标签

<template>
  <div>
    <Test1></Test1>
  </div>
</template>

<script>
import Test1 from "./components/Test1.vue";

export default {
  name: "App",
  components: { Test1 },
};
</script>

<style></style>

Test1.vue 中 使用 <transition>标签包裹过度的元素，并配置name属性，在style标签内编写动画内容

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- appear 是:apper="true" 的简写形式 -->
    <transition name="test1" appear> 
      <h1 v-show="isShow">Test1：Hello World</h1>
    </transition>
  </div>
</template>

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

<style scoped>
h1 {
  background-color: orange;
}
.test1-enter-active {
  animation: hello 0.5s linear;
}
.test1-leave-active {
  animation: hello 0.5s linear reverse;
}

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

由图示可看出，刷新页面后，会加载动画入场效果，点击按钮也能实现动画效果

三、过度效果 - 案例练习

App.vue 中 引入Test2组件，并使用Test2组件标签

<template>
  <div>
    <Test1></Test1>
    <Test2></Test2>
  </div>
</template>

<script>
import Test1 from "./components/Test1.vue";
import Test2 from "./components/Test2.vue";

export default {
  name: "App",
  components: { Test1, Test2 },
};
</script>

<style></style>

Test1.vue 中 使用 <transition>标签包裹过度的元素，并配置name属性，在style标签内编写<transition>标签带来的样式类名 的内容

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- appear 是:apper="true" 的简写形式 -->
    <transition name="test2" appear>
      <h1 v-show="isShow">Test2：Hello World</h1>
    </transition>
  </div>
</template>

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

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

由图示可看出，刷新页面后，会有入场过度效果，点击按钮也能实现过度效果

四、多个元素过度

在Test2.vue中 使用<transition-group>标签，并添加一段内容，且每个元素都要指定key值

    <transition-group name="test2" appear>
      <h1 v-show="isShow" key="1">Test2：Hello World</h1>
      <h1 v-show="isShow" key="2">Test2：你好 世界</h1>
    </transition-group>

由图示可看出，刷新页面后，两个<h1>标签都有入场过度效果，点击按钮也能实现过度效果

五、集成第三方动画

集成第三方动画网站：Animate.css | A cross-browser library of CSS animations.https://animate.style/第一步：安装

npm install animate.css --save

第二步：在目标组件中引入

import "animate.css";

第三步：使用 <transition>标签包裹过度的元素，并用第三方动画规定的类名配置 name 、enter-active-class 和 leave-active-class

    <transition
      name="animate__animated animate__bounce"
      appear
      enter-active-class="animate__heartBeat"
      leave-active-class="animate__backOutDown"
    >
      <h1 v-show="isShow">Test3：Hello World</h1>
    </transition>

Test3.vue 完整代码：

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <!-- appear 是:apper="true" 的简写形式 -->
    <transition
      name="animate__animated animate__bounce"
      appear
      enter-active-class="animate__heartBeat"
      leave-active-class="animate__backOutDown"
    >
      <h1 v-show="isShow">Test3：Hello World</h1>
    </transition>
  </div>
</template>

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

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

由图示可看出成功使用了第三方动画

六、TodoList案例添加动画效果

TodoList案例

本地存储、自定义事件 中 TodoList案例

全局事件总线、消息订阅与发布 中 TodoList案例

为TodoList案例添加动画效果，即主要为UserItem中的列表内容添加动画效果

方法一：UserItem.vue 使用 <transition>标签包裹过度的元素，并配置name属性，在style标签内编写<transition>标签带来的样式类名 的内容

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

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

<style scoped>
.....

/* 进入的起点、离开的终点 */
.todo-enter,
.todo-leave-to {
  transform: translateX(100%);
}
.todo-enter-active,
.todo-leave-active {
  transition: 0.5s linear;
}
/* 离开的起点、进入的终点 */
.todo-leave,
.todo-enter-to {
  transform: translateX(0);
}
</style>

方法二：Userlist.vue 使用 <transition-group>标签包裹过度的元素，并配置name属性，在style标签内编写<transition-group>标签带来的样式类名 的内容

<template>
  <ul class="todo-main">
    <transition-group name="todo" appear>
      <UserItem
        v-for="todoObj in todos"
        :key="todoObj.id"
        :todo="todoObj"
      ></UserItem>
    </transition-group>
  </ul>
</template>

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

<style scoped>
.....

/* 进入的起点、离开的终点 */
.todo-enter,
.todo-leave-to {
  transform: translateX(100%);
}
.todo-enter-active,
.todo-leave-active {
  transition: 0.5s linear;
}
/* 离开的起点、进入的终点 */
.todo-leave,
.todo-enter-to {
  transform: translateX(0);
}
</style>