【Vue 学习】Vue2 的动画与过渡

已于 2023-03-16 23:37:56 修改
阅读量1k 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue
于 2023-03-16 23:21:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bugu_hhh/article/details/129603645
版权

Vue2 的动画与过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡的效果

1. 原生 CSS3 的动画

<template>
  <h1 class="box leave">Hello,World!!</h1>
</template>


<script>
export default {
  name: "HelloWorld",
}
</script>


<style lang="less" scoped>
.box {
  margin: 0 auto;
  width: 500px;
  height: 50px;
  background-color: pink;
}

.enter {
  animation: hello-box 0.5s linear;
  background-color: black;
}

.leave {
  animation: hello-box 0.5s linear reverse;
  background-color: skyblue;
}

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

2. Vue 的动画与过渡

  • 利用 v-is、v-show 显示隐藏元素，Vue 会自动添加过渡效果
  • transition 标签最终并没有形成真实 dom
  • 使用 <transition></transition> 包裹，transition 标签有一个 name 属性，可以用来与过渡动画样式绑定
  • 默认第一次显示元素的时候是没有动画的，可以添加 appear 属性，使得第一次显示也有动画

（1）通过 name 绑定过渡样式

<template>
  <div class="main">
    <button @click="isShow = !isShow">显示与隐藏</button>
    <transition name="hello" :appear="true">
      <h1 v-if="isShow">Hello,World!!</h1>
    </transition>
  </div>
</template>


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


<style scoped>
h1 {
  background-color: red;
  text-align: center;
}

.hello-enter {
  transform: translateX(-100%);
}

.hello-enter-active {
  transition: all .5s;
}

.hello-enter-to {
  transform: translateX(0);
}

.hello-leave {
  transform: translateX(0);
}

.hello-leave-active {
  transition: all .5s;
}

.hello-leave-to {
  transform: translateX(-100%);
}
</style>

（2）通过 name 绑定动画样式

<template>
  <div class="main">
    <button @click="isShow = !isShow">显示与隐藏</button>
    <transition name="hello" :appear="true">
      <h1 v-if="isShow">Hello,World!!</h1>
    </transition>
  </div>
</template>


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


<style scoped>
h1 {
  background-color: red;
  text-align: center;
}

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

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

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

（3）通过 class 绑定过渡样式

<template>
  <div class="main">
    <button @click="isShow = !isShow">显示与隐藏</button>
    <transition
        name="hello"
        :appear="true"
        enter-class="hello-enter"
        enter-active-class="hello-enter-active"
        enter-to-class="hello-enter-to"
        leave-class="hello-leave"
        leave-active-class="hello-leave-active"
        leave-to-class="hello-leave-to"
    >
      <h1 v-if="isShow">Hello,World!!</h1>
    </transition>
  </div>
</template>


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


<style scoped>
h1 {
  background-color: red;
  text-align: center;
}

.hello-enter {
  transform: translateX(-100%);
}

.hello-enter-active {
  transition: all .5s;
}

.hello-enter-to {
  transform: translateX(0);
}

.hello-leave {
  transform: translateX(0);
}

.hello-leave-active {
  transition: all .5s;
}

.hello-leave-to {
  transform: translateX(-100%);
}
</style>

（4）通过 class 绑定动画样式

<template>
  <div class="main">
    <button @click="isShow = !isShow">显示与隐藏</button>
    <transition
        name="hello"
        :appear="true"
        enter-active-class="enter"
        leave-active-class="leave"
    >
      <h1 v-if="isShow">Hello,World!!</h1>
    </transition>
  </div>
</template>


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


<style scoped>
h1 {
  background-color: red;
  text-align: center;
}

.enter {
  animation: hello-box .5s linear;
}

.leave {
  animation: hello-box .5s linear reverse;
}

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

3. 多个元素使用过渡

  • <transition></transition> 标签里面只可以有一个元素
  • 使用 <transition-group></transition-group> 标签可以包裹多个元素，但是子元素必须配置一个 key，否则报错

（1）使用多个 transition 标签

<template>
  <div class="main">
    <button @click="isShow = !isShow">显示与隐藏</button>
    <transition name="hello" :appear="true">
      <h1 v-if="isShow">Hello,World!!</h1>
    </transition>
    <transition name="hello" :appear="true">
      <h1 v-if="!isShow">Hello,World!!</h1>
    </transition>
  </div>
</template>


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


<style scoped>
h1 {
  background-color: red;
  text-align: center;
}

.hello-enter {
  transform: translateX(-100%);
}

.hello-enter-active {
  transition: all .5s;
}

.hello-enter-to {
  transform: translateX(0);
}

.hello-leave {
  transform: translateX(0);
}

.hello-leave-active {
  transition: all .5s;
}

.hello-leave-to {
  transform: translateX(-100%);
}
</style>

（2）使用 transition-group 标签

<template>
  <div class="main">
    <button @click="isShow = !isShow">显示与隐藏</button>
    <transition-group name="hello" :appear="true">
      <h1 v-if="isShow" :key="1">Hello,World!!</h1>
      <h1 v-if="!isShow" :key="2">Hello,World!!</h1>
    </transition-group>
  </div>
</template>


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


<style scoped>
h1 {
  background-color: red;
  text-align: center;
}

.hello-enter {
  transform: translateX(-100%);
}

.hello-enter-active {
  transition: all .5s;
}

.hello-enter-to {
  transform: translateX(0);
}

.hello-leave {
  transform: translateX(0);
}

.hello-leave-active {
  transition: all .5s;
}

.hello-leave-to {
  transform: translateX(-100%);
}
</style>

4. 在 Vue 中使用 Animate.css 动画库

第三方动画库

  • 自定义类目使用第三方 CSS 动画库
  • 事件的回调函数中使用第三方 JavaScript 动画库直接操作 DOM

使用第三方动画库，这里演示的是：Animate.css | A cross-browser library of CSS animations.

安装

npm install animate.css --save

引入

// 方法一：在 script 标签里面引入
import 'animate.css';

<!-- 方法二：使用 link 标签引入 -->
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

使用

  • 配置 name 属性
  • 使用自定义类目，一般引入第三方动画库，仅配置自定义类名即可
<template>
  <div class="main">
    <button @click="isShow = !isShow">显示与隐藏</button>
    <!-- 
		- 配置 name 属性
		- 自定义类名
	-->
    <transition
        name="animate__animated animate__bounce"
        :appear="true"
        enter-active-class="animate__swing"
        leave-active-class="animate__backInUp"
    >
      <h1 v-if="isShow" style="background-color: red;">Hello,World!!</h1>
    </transition>
  </div>
</template>

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

<style scoped>
</style>
写代码的不谷
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
animated-vue, 使用 animate.css 动画作为Vue2过渡的插件.zip
09-16
animated-vue, 使用 animate.css 动画作为Vue2过渡的插件 动画 vue使用 animate.css 动画作为Vue2过渡的插件演示: 即将推出 ！安装和使用从npm安装动画 vue 和收费的animate.cssnpm install --save animated-vue animat
vue2中使用transition
weixin_33819479的博客
11-09 199
最终效果为 div元素从右向左出现， 然后从左向右消失。 transition标签包裹要移动的元素： css 样式： 其中： 　　1： 为div元素显示时的状态 　　2： 为div元素移动的过程 　　　　　　（进入的过程，离开的过程） 　　　　　　（直线运动，运动0.3s） 　　3： 为div元素移动之前和离开后的转态 　　　　　　（三个参数分别...
Vue过渡动画，组件动画，元素动画（vue2元素、组件过渡动画）
最新发布
weixin_65793170的博客
03-28 471
在 CSS 中，你需要定义以 name 属性值为前缀的六个类名来控制过渡的不同阶段。例如，如果 name="fade"，则需要定义以下类：.fade-enter-active： 定义进入过渡的持续时间、缓动函数等。.fade-enter-from： 定义进入过渡开始时的样式。.fade-enter： 定义进入过渡结束时的样式。.fade-leave-active： 定义离开过渡的持续时间、缓动函数等。.fade-leave-from： 定义离开过渡开始时的样式。
VUE2 动画效果
DTCloud
04-23 771
作用：在插入、更新或移除DOM元素时，在适合的时候给元素添加样式类名。 图示： 简单写法 <transition name="hello" appear> <!-- name="hello"表示transition名称-enter-active和-leave-active对应，与下面；appear表示页面一出现就产生动画 --> <h1 v-show="isShow">你好~</h1> </transition> <button
Vue2.的动画过渡
切图仔
05-03 367
在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。 目录 1.先准备样式和定义动画或过渡 2.使用包裹要过度的元素，并配置name属性： 3.多个元素过渡，指定key值 使用第三方库animate.css 1.先准备样式和定义动画或过渡 元素进入的样式： v-enter：进入的起点 v-enter-active：进入过程中 v-enter-to：进入的终点 元素离开的样式： v-leave：离开的起点 v-leave-active：离开过程中 v-leave
vue2 动画animation
fyinthesky的专栏
02-27 776
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;    
Vue运用transition实现过渡动画
10-17
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
vue实现列表滚动的过渡动画
11-20
本文实例为大家分享了Vue实现列表滚动过渡动画的具体代码，供大家参考，具体内容如下 效果图 失帧比较严重，在手机上效果更佳。 原理分析 这个滚动页面由两个部分布局（底部固定的Tab页面除外）。一个是顶部的...
解决vue的过渡动画无法正常实现问题
01-19
前记：最近在写vue的一个项目要实现过渡的效果，虽然vue动画不是强项，库也多,但是基本的坑还是得踩扎实; 建议：先学习vue官方文档的进入/离开 & 列表过渡章节，那么我们来看bug; 首先上出现问题的代码 <!...
vue元素实现动画过渡效果
12-10
1 在 vue 中，使用 <transition> 标签包含着的单个子元素在使用 v-show 或 v-if 切换显示隐藏前，会先判断是否有对应的 class 样式能匹配到该子元素上： [removed][removed] <style> red {background-color:...
vue中组件的过渡动画及实现代码
10-17
主要介绍了vue中组件的过渡动画，并通过实例代码给大家介绍了过渡动画的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
【vue】vue2.x系列（二）之过渡&动画
zhangankang的博客
06-30 382
一、背景 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 1、使用css实现过渡&动画原理：<transition>组件：上可设置自定义类名 通过在组件、元素进入/离开时自动添加不同的类名来实现效果；整个过程涉及6个类： v-enter：定义进入过渡的开始； v-enter-active：定义从开始进入到进入完成之间的过程，这个类可以被
【Vue框架】Vue2中动画效果详解—单组动画、多组动画、使用animate动画库、transition-group 列表动画(附源码)
量化Mike
03-30 886
动画过渡效果：https://cn.vuejs.org/v2/guide/transitions.html 2、Vue定义多组动画 3、使用animate动画库 动画样式库
vue2-过渡动画
weixin_45002586的博客
11-10 330
vue 过渡动画
vue2 笔记8动画
路过君的博客
01-29 686
样例解析 <template> <div class="hello"> <button @click="show1 = !show1">show</button> <!-- 使用transition标签，会在动画的对应阶段给包裹的元素添加、删除相应的样式 --> <!-- appear 使得元素在创建时就使用动画显示 --> <transition appear> <h1
vue2 过渡动画
a1178939617的博客
05-12 87
<body> <div id="app"> <transition name="move"> // transition里面的 div是我们要执行的动画 <div class="car" @click="car" transition="move" v-show="number>0">-</di...
Vue2过渡/动画
cjiajiajiawa的博客
04-03 526
在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如。在元素被插入之前生效，在元素被插入之后的下一帧移除。在离开过渡被触发时立刻生效，下一帧被移除。可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。
vue2的transition组件使用
qq_44746317的博客
09-21 840
项目问题：在项目中想实现一个的是图片的过度效果，本来想做从左到右逐渐显示的效果的，但是一直实现不了，降低要求，直接实现一个透明度从0到1的过程，使用的是$ref,但是在实现的过程中，发现将图片设置为opacity，还是会占据空间，造成我下面的组件的功能不能实现。比如说在图片下覆盖的按钮，就不能点击了，但是display对transition没有作用，而且display性能相对于opacity比较好，这个时候，发现了vue的transition，太好用了。直接贴个博主链接，可以去看详细使用。
vue2 动画javascript钩子
qq_32524473的博客
07-21 881
Vue2实现动画的方式可以是css也可以js钩子，大部分情况下css3即可满足，但若是需要在实现动画过程中进行位置计算，那就需要使用js钩子函数来进行，接下来说一说踩钩子函数这个坑出现的疑惑点。官方文档：vue2动画钩子 1.首先实现一个钩子函数的过程是，在transition中监听beforeEnter等，官网有一句话是当只用javascript过渡时，必须调用done()，问题在于这个don...
使用vue3写一个根据宽度高度变化的过渡动画
02-07
首先，你需要在 Vue 组件的 `<template>` 中添加一个元素，并使用 `v-bind` 绑定宽度和高度的属性： ``` <template> <div v-bind:style="{ width: width + 'px', height: height + 'px' }"> </div> </template> ``` 然后，在组件的 `<style>` 中添加过渡效果： ``` <style> div { transition: width 0.5s, height 0.5s; } </style> ``` 最后，在组件的 `<script>` 中，使用 Vue 的 `watch` 选项监听宽度和高度的变化，并在变化时触发过渡动画： ``` <script> export default { data() { return { width: 100, height: 100 } }, watch: { width(newWidth, oldWidth) { this.width = newWidth; }, height(newHeight, oldHeight) { this.height = newHeight; } } } </script> ``` 这样，当宽度或高度发生变化时，过渡动画就会自动触发。你可以根据需要调整过渡时间，或者添加其他过渡效果，例如改变颜色或位置等。 希望这对你有帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

写代码的不谷

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值