[Vue]动画与过渡

已于 2022-11-11 18:12:08 修改
阅读量627 收藏 1
点赞数 3
分类专栏： Vue 学习笔记 文章标签： vue.js 动画 前端 前端框架 css3
于 2022-10-18 23:58:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53022813/article/details/127392473
版权

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

1. 绑定class样式实现动画效果

main.js

import Vue from 'vue'
import App from './App.vue'

//关闭vue的生产提示
Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div class="app">
    <Test></Test>
  </div>
</template>

<script>
//导入子组件
import Test from './components/Test.vue'

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

<style scoped>
</style>

Test.vue

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <h1 :class="animation" v-show="isShow">hello world</h1>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      // 控制显示与隐藏
      isShow: false,
      // 需要进行绑定的样式
      animation: ''
    }
  },
  methods: {
    changeShow() {
      // 如果是隐藏状态
      if (!this.isShow) {
        // 更改为显示状态，并且绑定进入样式
        this.isShow = true
        this.animation = 'enter'
      } else {
        // 如果不为隐藏状态
        // 更改为隐藏状态，绑定离开样式
        this.isShow = false
        this.animation = 'leave'
      }
    }
  }
}
</script>

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

/* 进入动画 */
.enter {
  animation: sgg 0.5s linear;
}

/* 离开动画 */
.leave {
  animation: sgg 0.5s linear reverse;
}

/* 自定义动画 */
@keyframes sgg {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

在这里插入图片描述
在这里插入图片描述

2. transition 标签实现动画效果

2.1 语法

vue规定，想要让哪个元素具有动画效果，就使用 transition 标签将该元素进行包裹，vue会在合适的时机为元素加上动画效果。

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

要实现动画效果，还需要将动画的命名修改为符合vue的规定，进入页面的动画的命名为v-enter-active，离开页面的动画的命名为v-leave-active。

/* 进入动画 */
.v-enter-active {
  animation: sgg 0.5s linear;
}

/* 离开动画 */
.v-leave-active {
  animation: sgg 0.5s linear reverse;
}

/* 自定义动画 */
@keyframes sgg {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

2.2 动画实现

Test.vue

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <transition>
      <h1 v-show="isShow">hello world</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      // 控制显示与隐藏
      isShow: false,
    }
  },
  methods: {
    changeShow() {
      // 如果是隐藏状态
      if (!this.isShow) {
        // 更改为显示状态
        this.isShow = true
      } else {
        // 如果不为隐藏状态
        // 更改为隐藏状态
        this.isShow = false
      }
    }
  }
}
</script>

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

/* 进入动画 */
.v-enter-active {
  animation: sgg 0.5s linear;
}

/* 离开动画 */
.v-leave-active {
  animation: sgg 0.5s linear reverse;
}

/* 自定义动画 */
@keyframes sgg {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.3 为 transition 标签指定名字

为 transition 标签指定名字，需要使用 transition 标签上的 name 属性，如果为 transition 标签指定了名字，那么对应的动画的名字也要进行相应的更改。

为 transition 标签指定了名字，可以实现使得不同的元素有不同的动画。

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

/* 进入动画 */
.hello-enter-active {
  animation: sgg 0.5s linear;
}

/* 离开动画 */
.hello-leave-active {
  animation: sgg 0.5s linear reverse;
}

/* 自定义动画 */
@keyframes sgg {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

Test.vue

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <transition name="hello">
      <h1 v-show="isShow">hello world</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      // 控制显示与隐藏
      isShow: false,
    }
  },
  methods: {
    changeShow() {
      // 如果是隐藏状态
      if (!this.isShow) {
        // 更改为显示状态
        this.isShow = true
      } else {
        // 如果不为隐藏状态
        // 更改为隐藏状态
        this.isShow = false
      }
    }
  }
}
</script>

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

/* 进入动画 */
.hello-enter-active {
  animation: sgg 0.5s linear;
}

/* 离开动画 */
.hello-leave-active {
  animation: sgg 0.5s linear reverse;
}

/* 自定义动画 */
@keyframes sgg {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.4 页面加载完成立即执行动画

要实现页面加载完成立即执行动画，需要使用 transition 标签的 appear 属性，指定该属性的值为 true。

    <!-- 
      需要进行属性绑定，如果使用 appear="true" 则 appear 的值为 “true”
      使用 :appear="true"，appear 的值为 true
    -->
    <transition name="hello" :appear="true">
      <h1 v-show="isShow">hello world</h1>
    </transition>

或者

    <!-- 
      appear 相当于 :appear="true"
    -->
    <transition name="hello" appear>
      <h1 v-show="isShow">hello world</h1>
    </transition>

Test.vue

<template>
  <div>
    <button @click="changeShow">显示/隐藏</button>
    <!-- 
      页面加载完成立即执行动画，
      需要设置默认 h1 为显示
    -->
    <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-active {
  animation: sgg 0.5s linear;
}

/* 离开动画 */
.hello-leave-active {
  animation: sgg 0.5s linear reverse;
}

/* 自定义动画 */
@keyframes sgg {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

在这里插入图片描述
在这里插入图片描述

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：离开的终点

    2. 使用<transition>包裹要过度的元素，并配置name属性：

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

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

小炜1128
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue过渡与动画
qq_42839746的博客
05-02 1615
Vue过渡与动画概述： vue使用transition组件实现了过渡与动画，Vue的过渡系统可以在元素从DOM中插入或移除时自动应用过渡效果，也提供配合使用第三方 CSS 动画库(如 animate.css)来实现动画效果。
Vue基础篇之过渡和动画
fvcvv的博客
11-30 672
Vue基础篇之过渡和动画
Vue实现网页首屏加载动画、页面内请求数据加载loading
在写作的路上持续输出。
11-17 1万+
Vue实现网页首屏加载动画、页面内请求数据加载loading
vue首次加载白屏过渡动画（vue优化）
一人创客的博客
09-01 1561
过渡动画需要在index.html文件里面添加 1.css，在public.index.css创建index.css html, body, #app { height: 100%; margin: 0px; padding: 0px; } .chromeframe { margin: ...
教你用Vue如何实现过渡&动画效果
EX1332914934的博客
05-10 6943
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果 Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单例子 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="
Vue运用transition实现过渡动画
10-17
例如，我们可以使用`v-if`或`v-show`来控制元素的显示与隐藏，配合CSS动画实现过渡效果。 以下是一个简单的例子： ```html 第一个 第二个 第三个 第一个文本 第二个文本 第三个文本 export ...
vue实现列表滚动的过渡动画
11-20
在本例中，我们将讨论如何使用Vue实现列表滚动的过渡动画。这种动画效果在滚动列表时为用户体验增加了动态感，使得滚动更加平滑和吸引人。 首先，我们要了解实现这种过渡动画的基本原理。在滚动过程中，我们需要...
Vue.js 过渡 & 动画
12-13
Vue.js的过渡和动画是其框架中的重要特性，允许开发者在DOM操作时添加动态效果，增强用户体验。Vue在插入、更新或移除DOM元素时，提供了多种方式来应用过渡效果。过渡效果通常由Vue的内置封装组件`<transition>`来...
vue元素实现动画过渡效果
12-10
在Vue中，我们可以使用`<transition>`组件来实现元素的动画过渡效果，使得页面动态变化时更加平滑、美观。这个功能主要涉及到CSS过渡效果、Vue生命周期钩子以及自定义动画类名。 1. **CSS过渡效果**： 在Vue中，`...
js实现页面加载完毕之前loading提示效果
06-10
js实现页面加载完毕之前loading提示效果：在页面上所有的DOM没有加载完毕之前，我们想让页面正中间显示一个“页面加载中，请稍后...”的字样，此效果正是，样式可以根据自己的需求改动！！！
vue项目（基本请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss例子）
06-21
搭建的简单地vue框架的例子，带有基本的请求本地数据的底层网络请求和页面间跳转淡入淡出动画效果、header组件的使用、可用scss。以后会逐步完善，整合一些公共的方法、组件等等
Vue动画事件详解及过渡动画实例
12-29
为了应用过渡效果，需要在目标元素上使用 transition 特性： <div v-if=show transition=my-transition></div> transition 特性可以与...尝试以 ID “my-transition” 查找 JavaScript 过渡钩子对象——通过 Vue.tra
【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果
看花容易绣花难
09-19 1790
【Vue】使用 Vue 实现基础的 CSS 过渡与动画效果
当vue页面加载数据时显示加载loading
zuo_zuo_blog的博客
10-23 1万+
vue动画过渡 转载 <template> <div class="loading"></div> </template> <script> export default { name: 'Loading' } </script> <style scoped> .loading { ...
vue页面出现正在加载的初始页面与实现动画效果
热门推荐
gang456789的博客
09-19 1万+
我们经常看到数据未出现时，页面中会有一条提示消息， 页面正在加载中，如何实现该效果呢 ，请看下面代码<template> <section class="page" v-if="option" :style="{background: option.background,color: option.color||'#fff'}" :class=
vue过渡动画（transition）
君兮的博客
08-19 2984
一、执行一个最简易的动画 给一个div 一个button，点击这个按钮的时候让这个div实现渐进渐出 执行动画的标签要被transition包裹起来，这个动画的实现范围就在这个transition标签内 给这个transition一个name属性（自定义）（在下面代码中为dpn） 通过给transition标签内的div上面添加类来实现动画效果 动画执行分为两个过程 一个是显示——隐藏 这里用到了三个类 这里的fade（和dpn一样，是自定义trasition name属性的值） 从第一
Vue中实现过渡动画
m0_71485750的博客
08-09 3207
目前为止，过渡动画我们只要是针对单个元素或者组件的：要么是单个节点；要么是同一时间渲染多个节点中的一个；那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？这个时候我们要使用组件来完成；使用有如下的特点：默认情况下，它不会渲染成任何一个元素，但是你可以指定一个元素并以 tag attribute 让他进行渲染；过渡模式不可用，因为我们不再相互切换特有的元素；...
vue 组件切换过渡动画
最新发布
08-03
回答: 在Vue中，可以通过使用过渡组件和CSS动画来实现组件切换的过渡动画效果。首先，可以使用Vue的过渡组件来包裹需要过渡的组件，例如使用<transition>标签包裹<router-view>或其他需要过渡的组件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值