AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

[Vue]动画与过渡（二）

2023-08-06 67
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： [Vue]动画与过渡（二）

3. 通过过渡实现动画效果

通过过渡实现动画效果一样需要使用 transition 标签将需要添加动画效果的元素进行包裹，vue会在合适的时机为元素加上动画效果。

<transition>
      <h1 v-show="isShow">hello world</h1>
    </transition>

通过过渡实现动画效果，需要提前写好过渡前的样式和过渡后的样式，过渡前后样式的类名需要满足vue的规定：

  • 进入页面的起点：.v-enter {}
  • 进入页面的终点：v-enter-to {}
  • 离开页面的起点：.v-leave {}
  • 离开页面的终点：v-leave-to {}

如果在 transition 标签中有指定 name 属性，则对应的样式类名中的v需要修改成对应的name。

<transition name="hello" appear>
      <h1 v-show="isShow">hello world</h1>
    </transition>
<style scoped>
h1 {
  background-color: orange;
  /* 指定动画的时间和方式 */
  transition: 0.5s linear;
}
/* 进入的起点 */
.hello-enter {
  transform: translate(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translate(0);
}
/* 离开的起点 */
.hello-leave {
  transform: translate(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translate(-100%);
}
</style>

由于离开的终点和进入的起点、离开的起点和进入的终点样式一样，所以可以进行合并：

<style scoped>
h1 {
  background-color: orange;
  /* 指定动画的时间和方式 */
  transition: 0.5s linear;
}
/* 进入的起点 离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translate(-100%);
}
/* 进入的终点 离开的起点 */
.hello-enter-to,
.hello-leave {
  transform: translate(0);
}
</style>

动画执行的时间和方式可以写在v-enter-active和v-leave-active中，由于动画执行的时间和方式在进入页面和离开页面一样，可以进行合并。

动画执行的时间和方式可以写在v-enter-active和v-leave-active中，不会影响原来的css样式。

<style scoped>
h1 {
  background-color: orange;
}
/* 进入的起点 离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translate(-100%);
}
/* 进入的终点 离开的起点 */
.hello-enter-to,
.hello-leave {
  transform: translate(0);
}
/* 动画被激活 */
.hello-enter-active,
.hello-leave-active {
  /* 指定动画的时间和方式 */
  transition: 0.5s linear;
}
</style>

Test.vue

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <transition name="hello" appear>
      <h1 v-show="isShow">hello world</h1>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
    return {
      // 控制显示与隐藏
      isShow: true,
    }
  },
  methods: {
    changeShow() {
      // 如果是隐藏状态
      if (!this.isShow) {
        // 更改为显示状态
        this.isShow = true
      } else {
        // 如果不为隐藏状态
        // 更改为隐藏状态
        this.isShow = false
      }
    }
  }
}
</script>
<style scoped>
h1 {
  background-color: orange;
}
/* 进入的起点 离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translate(-100%);
}
/* 进入的终点 离开的起点 */
.hello-enter-to,
.hello-leave {
  transform: translate(0);
}
/* 动画被激活 */
.hello-enter-active,
.hello-leave-active {
  /* 指定动画的时间和方式 */
  transition: 0.5s linear;
}
</style>

4. 多个元素过渡

实现多个元素过渡，需要使用 transition-group 标签，transition 标签只能用于一个元素的过渡。

transition-group 标签的用法和 transition 标签的用法一样。

注意：如果使用 transition-group 标签实现多个元素的过渡，需要为每个元素指定 key 属性值(这里的 key 与 v-for 循环中的 key 一样)。

4.1 实现多个元素同时显示同时隐藏

Test.vue

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <transition-group name="hello" appear>
      <h1 v-show="isShow" key="1">hello world</h1>
      <h1 v-show="isShow" key="2">你好 世界</h1>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
    return {
      // 控制显示与隐藏
      isShow: true,
    }
  },
  methods: {
    changeShow() {
      // 如果是隐藏状态
      if (!this.isShow) {
        // 更改为显示状态
        this.isShow = true
      } else {
        // 如果不为隐藏状态
        // 更改为隐藏状态
        this.isShow = false
      }
    }
  }
}
</script>
<style scoped>
h1 {
  background-color: orange;
}
/* 进入的起点 离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translate(-100%);
}
/* 进入的终点 离开的起点 */
.hello-enter-to,
.hello-leave {
  transform: translate(0);
}
/* 动画被激活 */
.hello-enter-active,
.hello-leave-active {
  /* 指定动画的时间和方式 */
  transition: 0.5s linear;
}
</style>

4.2 实现一个元素显示一个元素隐藏

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <transition-group name="hello" appear>
      <h1 v-show="isShow" key="1">hello world</h1>
      <h1 v-show="!isShow" key="2">你好 世界</h1>
    </transition-group>
  </div>
</template>
<script>
export default {
  name: 'Test',
  data() {
    return {
      // 控制显示与隐藏
      isShow: true,
    }
  },
  methods: {
    changeShow() {
      // 如果是隐藏状态
      if (!this.isShow) {
        // 更改为显示状态
        this.isShow = true
      } else {
        // 如果不为隐藏状态
        // 更改为隐藏状态
        this.isShow = false
      }
    }
  }
}
</script>
<style scoped>
h1 {
  background-color: orange;
}
/* 进入的起点 离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translate(-100%);
}
/* 进入的终点 离开的起点 */
.hello-enter-to,
.hello-leave {
  transform: translate(0);
}
/* 动画被激活 */
.hello-enter-active,
.hello-leave-active {
  /* 指定动画的时间和方式 */
  transition: 0.5s linear;
}
</style>

5. 第三方动画库

这里演示 Animate.css

【npm 官网】

【Animate.css 首页】

【Animate.css 中文官网】

5.1 安装

npm install animate.css --save

5.2 引入

// 引入 Animate.css 库
import 'animate.css'

5.3 配置

在 transition 标签或者 transition-group 标签设置属性 name 的值为：animate__animated animate__bounce

<transition-group name="animate__animated animate__bounce" appear>
      <h1 v-show="isShow" key="1">hello world</h1>
      <h1 v-show="!isShow" key="2">你好 世界</h1>
    </transition-group>

5.4 设置进入页面和离开页面的动画

在 transition 标签或者 transition-group 标签设置设置进入页面和离开页面的动画，需要使用属性enter-active-class和leave-active-class

选择动画：

5.5 实例效果

Test.vue

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <transition-group 
      name="animate__animated animate__bounce" 
      enter-active-class="animate__bounce"
      leave-active-class="animate__backOutUp"
      appear
    >
      <h1 v-show="isShow" key="1">hello world</h1>
      <h1 v-show="!isShow" key="2">你好 世界</h1>
    </transition-group>
  </div>
</template>
<script>
// 引入 Animate.css 库
import 'animate.css'
export default {
  name: 'Test',
  data() {
    return {
      // 控制显示与隐藏
      isShow: true,
    }
  },
  methods: {
    changeShow() {
      // 如果是隐藏状态
      if (!this.isShow) {
        // 更改为显示状态
        this.isShow = true
      } else {
        // 如果不为隐藏状态
        // 更改为隐藏状态
        this.isShow = false
      }
    }
  }
}
</script>
<style scoped>
h1 {
  background-color: orange;
}
</style>

6. 动画与过渡 总结

  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：离开的终点
  1. 使用<transition>包裹要过度的元素，并配置name属性：
<transition name="hello">
  <h1 v-show="isShow">你好啊！</h1>
</transition>
  1. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。


文章标签：
JavaScript
前端开发
关键词：
vue动画VUE.js
动画VUE.js
VUE.js动画
萤火虫的小尾巴
目录
相关文章
游客ady5kpv352g3u
|
4天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
游客ady5kpv352g3u
12 1
vue学习第四章
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
13 1
vue学习第九章(v-model)
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
游客ady5kpv352g3u
9 1
vue学习第十章(组件开发）
我是快乐的嘟嘟
|
10天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
94 26
html的七十二变
|
10天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
32 8
html的七十二变
|
10天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
27 7
html的七十二变
|
10天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
30 5
游客ady5kpv352g3u
|
9天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
21 3
html的七十二变
|
11天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
29 5
游客ady5kpv352g3u
|
9天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
19 2

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    自制简单的range（Vue）
  • 5
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 6
    vite原理之解析.vue文件
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 10
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 1
    vue代码优化方案
    57
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    143
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    227
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1169
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    490
  • 8
    【vue】 vue2 监听滚动条滚动事件
    147
  • 9
    【天地图】vue 天地图 T is not defined
    182
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    648

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • 基于VUE的单页面性能优化实践
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    无影云桌面