学习Vue过渡&动画实现

最新推荐文章于 2024-09-13 10:49:07 发布
最新推荐文章于 2024-09-13 10:49:07 发布
阅读量1.8k 收藏 9
点赞数 1
文章标签： 动画 vue.js javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanxinwl/article/details/122704182
版权

认识动画

在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验：

  • React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group；
  • Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果；

案列：

  • Hello World的显示和隐藏；
  • 通过下面的代码实现，是不会有任何动画效果的；
    在这里插入图片描述
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <h2 v-if="isShow">Hello Word</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>
  • 没有动画的情况下，整个内容的显示和隐藏会非常的生硬：
  • 如果我们希望给单元素或者组件实现过渡动画，可以使用 transition 内置组件来完成动画；

Vue的transition动画

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡：

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="fade">
      <h2 v-if="isShow">Hello Word</h2>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s ease;
}
</style>

在这里插入图片描述

Transition组件的原理

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

  • 自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；
  • 如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；
  • 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；

过渡动画class

  • v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  • v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。
  • v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  • v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/动画完成之后移除。

class添加的时机和命名规则

在这里插入图片描述
class的name命名规则如下：

  • 如果我们使用的是一个没有name的transition，那么所有的class是以 v- 作为默认前缀；
  • 如果我们添加了一个name属性，比如 ，那么所有的class会以 done- 开头；

过渡css动画

前面是通过transition来实现的动画效果，另外我们也可以通过animation来实现。

<template>
  <div id="app">
    <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
    </div>
    <transition name="bounce">
      <h2 class="title" v-if="isShow">Hello Word</h2>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
#app{
  width: 200px;
  margin: 0 auto;
}
.title {
  display: inline-block;
}
.bounce-enter-active {
  animation: bounce 1s ease;
}
.bounce-leave-active {
  animation: bounce 1s ease reverse;
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

在这里插入图片描述

同时设置过渡和动画

Vue为了知道过渡的完成，内部是在监听 transitionend 或 animationend，到底使用哪一个取决于元素应用的CSS规则：如果我们只是使用了其中的一个，那么Vue能自动识别类型并设置监听；
但是如果我们同时使用了过渡和动画呢？

  • 并且在这个情况下可能某一个动画执行结束时，另外一个动画还没有结束；
  • 在这种情况下，我们可以设置 type 属性为 animation 或者 transition 来明确的告知Vue监听的类型；
<template>
  <div id="app">
    <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
    </div>
    <transition name="bounce" type="transition">
      <h2 class="title" v-if="isShow">Hello Word</h2>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
#app{
  width: 200px;
  margin: 0 auto;
}
.title {
  display: inline-block;
}

.bounce-enter-from,
.bounce-leave-to {
  opacity: 0;
}

.bounce-enter-active,
.bounce-leave-active {
  transition: opacity 1s ease;
}

.bounce-enter-active {
  animation: bounce 1s ease;
}
.bounce-leave-active {
  animation: bounce 1s ease reverse;
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

在这里插入图片描述

显示的指定动画时间

Vue为了知道过渡的完成，内部是在监听 transitionend 或 animationend，到底使用哪一个取决于元素应用的CSS规则：
如果我们只是使用了其中的一个，那么Vue能自动识别类型并设置监听；
但是如果我们同时使用了过渡和动画呢？
并且在这个情况下可能某一个动画执行结束时，另外一个动画还没有结束；
在这种情况下，我们可以设置 type 属性为 animation 或者 transition 来明确的告知Vue监听的类型；

<template>
  <div id="app">
    <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
    </div>
    <transition name="bounce" type="transition">
      <h2 class="title" v-if="isShow">Hello Word</h2>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isShow: true
    }
  }
}
</script>

<style scoped>
#app{
  width: 200px;
  margin: 0 auto;
}
.title {
  display: inline-block;
}

.bounce-enter-from,
.bounce-leave-to {
  opacity: 0;
}

.bounce-enter-active,
.bounce-leave-active {
  transition: opacity 2s ease;
}

.bounce-enter-active {
  animation: bounce 1s ease;
}
.bounce-leave-active {
  animation: bounce 1s ease reverse;
}
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

在这里插入图片描述

显示的指定动画时间

我们也可以显示的来指定过渡的时间，通过 duration 属性。
duration可以设置两种类型的值：

  • number类型：同时设置进入和离开的过渡时间；
  • object类型：分别设置进入和离开的过渡时间；
<transition name="bounce" type="transition" :duration="1000">
  <h2 class="title" v-if="isShow">Hello Word</h2>
</transition>

<transition name="bounce" type="transition" :duration="{enter: 800, leave: 1000}">
  <h2 class="title" v-if="isShow">Hello Word</h2>
</transition>

过渡的模式mode

我们来看当前的动画在两个元素之间切换的时候存在的问题：
在这里插入图片描述
我们会发现 Hello World 和 Hello Vue.js是同时存在的：
这是因为默认情况下进入和离开动画是同时发生的；
如果我们不希望同时执行进入和离开动画，那么我们需要设置transition的过渡模式：

  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开；
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入；
<transition name="bounce" mode="out-in">
  <h2 class="title" v-if="isShow">Hello Word</h2>
  <h2 v-else>Hello Vue.js</h2>
</transition>

在这里插入图片描述

动态组件的切换

上面的示例同样适用于我们的动态组件：
在这里插入图片描述

appear初次渲染

默认情况下，首次渲染的时候是没有动画的，如果我们希望给他添加上去动画，那么就可以增加另外一个属性appear：
在这里插入图片描述

认识animate.css

如果我们手动一个个来编写这些动画，那么效率是比较低的，所以在开发中我们可能会引用一些第三方库的动画库，比如animate.css。
什么是animate.css呢？
Animate.css是一个已经准备好的、跨平台的动画库为我们的web项目，对于强调、主页、滑动、注意力引导非常有用；
如何使用Animate库呢？

  • 安装animate.css库；
  • 导入animate.css库的样式；
  • 使用animation动画或者animate提供的类；

自定义过渡class

我们可以通过以下 attribute 来自定义过渡类名：

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class
    他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十 分有用。

animate.css库的使用

  • 安装animate.css：

npm install animate.css

  • 在main.js中导入animate.css：
import 'animate.css'
  • 接下来在使用的时候我们有两种用法：
    用法一：直接使用animate库中定义的 keyframes 动画；
    用法二：直接使用animate库提供给我们的类；
    在这里插入图片描述

在这里插入图片描述

认识gsap库

某些情况下我们希望通过JavaScript来实现一些动画的效果，这个时候我们可以选择使用gsap库来完成。
什么是gsap呢？

  • GSAP是The GreenSock Animation Platform（GreenSock动画平台）的缩写；
  • 它可以通过JavaScript为CSS属性、SVG、Canvas等设置动画，并且是浏览器兼容的；

这个库应该如何使用呢？

  • 安装gsap库；

npm install gsap

  • 导入gsap库；
  • 使用对应的api即可；

JavaScript钩子

在使用动画之前，我们先来看一下transition组件给我们提供的JavaScript钩子，这些钩子可以帮助我们监听动画执行到什么阶段了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
当我们使用JavaScript来执行过渡动画时，需要进行 done 回调，否则它们将会被同步调用，过渡会立即完成。
添加 :css=“false”，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。

gsap库的使用

<template>
  <div id="app">
    <div>
      <button @click="isShow = !isShow">显示/隐藏</button>
    </div>
    <transition name="bounce" @enter="enter" @leave="leave">
      <h2 class="title" v-if="isShow">Hello Word</h2>
    </transition>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  data () {
    return {
      isShow: true
    }
  },
  methods: {
    enter(el,done) {
      gsap.from(el, {
        scale: 0,
        x: 200,
        onComplete: done
      })
    },
    leave(el,done) {
      gsap.to(el, {
        scale: 0,
        x: 200,
        onComplete: done
      })
    }
  }
}
</script>

<style scoped>
#app{
  width: 200px;
  margin: 0 auto;
}
.title {
  display: inline-block;
}

</style>

在这里插入图片描述

gsap实现数字变化

在一些项目中，我们会见到数字快速变化的动画效果，这个动画可以很容易通过gsap来实现：

<template>
  <div id="app">
    <input type="number" step="100" v-model="counter">
    <h2>当前计数：{{ showCounter }}</h2>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  data () {
    return {
      counter: 0,
      showNumber:0
    }
  },
  computed: {
    showCounter() {
      return this.showNumber.toFixed(0)
    }
  },
  watch: {
    counter(newValue) {
      gsap.to(this, {duration: 1, showNumber: newValue})
    }
  }
}
</script>

在这里插入图片描述

认识列表的过渡

目前为止，过渡动画我们只要是针对单个元素或者组件的：

  • 要么是单个节点；
  • 要么是同一时间渲染多个节点中的一个；

那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？

  • 这个时候我们要使用 <transition-group>组件来完成；

使用<transition-group> 有如下的特点：

  • 默认情况下，它不会渲染一个元素的包裹器，但是你可以指定一个元素并以 tag attribute进行渲染；
  • 过渡模式不可用，因为我们不再相互切换特有的元素；
  • 内部元素总是需要提供唯一的 key attribute 值；
  • CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身；

列表过渡的基本使用

一列数字，可以继续添加或者删除数字；在添加和删除数字的过程中，对添加的或者移除的数字添加动画；
在这里插入图片描述

<template>
  <div id="app">
    <button @click="addNum">添加数字</button>
    <button @click="removeNum">删除数字</button>
    <transition-group tag="p" name="why">
      <span v-for="item in numbers" :key="item" class="item">{{ item }}</span>
    </transition-group>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data () {
    return {
      numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      numCounter: 10
    }
  },
  methods: {
    addNum() {
      this.numbers.splice(this.randomIndex(), 0, this.numCounter++)
    },
    removeNum() {
      this.numbers.splice(this.randomIndex(), 1)
    },
    randomIndex() {
      return Math.floor(Math.random() * this.numbers.length)
    }
  },
}
</script>

<style scoped>
.item {
  margin-right: 10px;
  display: inline-block;
}
.why-enter-from,
.why-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.why-enter-active,
.why-leave-active {
  transition: all 1s ease;
}
</style>

列表过渡的移动动画

在上面的案例中虽然新增的或者删除的节点是有动画的，但是对于哪些其他需要移动的节点是没有动画的：

  • 我们可以通过使用一个新增的 v-move 的class来完成动画；
  • 它会在元素改变位置的过程中应用；
  • 像之前的名字一样，我们可以通过name来自定义前缀；

在这里插入图片描述

<template>
  <div id="app">
    <button @click="addNum">添加数字</button>
    <button @click="removeNum">删除数字</button>
    <button @click="shuffleNum">数字洗牌</button>
    <transition-group tag="p" name="why">
      <span v-for="item in numbers" :key="item" class="item">{{ item }}</span>
    </transition-group>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  data () {
    return {
      numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      numCounter: 10
    }
  },
  methods: {
    addNum() {
      this.numbers.splice(this.randomIndex(), 0, this.numCounter++)
    },
    removeNum() {
      this.numbers.splice(this.randomIndex(), 1)
    },
    shuffleNum() {
      this.numbers = _.shuffle(this.numbers)
    },
    randomIndex() {
      return Math.floor(Math.random() * this.numbers.length)
    }
  },
}
</script>

<style scoped>
.item {
  margin-right: 10px;
  display: inline-block;
}
.why-enter-from,
.why-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.why-enter-active,
.why-leave-active {
  transition: all 1s ease;
}

.why-leave-active {
  position: absolute;
}

.why-move {
  transition: transform 1s ease;
}
</style>

列表的交错过渡案例

通过gsap的延迟delay属性，做一个交替消失的动画：
在这里插入图片描述

<template>
  <div id="app">
    <input type="text" v-model="keyword">
    <transition-group 
      tag="ul" name="why" 
      :css="false" 
      @before-enter="beforeEnter"
      @enter="enter" 
      @leave="leave">
      <li v-for="(item, index) in showName" :key="item" :data-index="index">{{ item }}</li>
    </transition-group>
  </div>
</template>

<script>
import gsap from 'gsap'
export default {
  data () {
    return {
      names: ['吴京', '赵卓', '王宝强', '吴彦祖', '刘德华', '张学友'],
      keyword: ''
    }
  },
  computed: {
    showName() {
      return this.names.filter(item => item.includes(this.keyword))
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter(el, done) {
      gsap.to(el, {
        opacity: 1,
        height: '1.5em',
        delay: el.dataset.index * 0.5,
        onComplete: done
      })
    },
    leave(el, done) {
      gsap.to(el, {
        opacity: 0,
        height: 0,
        delay: el.dataset.index * 0.5,
        onComplete: done
      })
    }
  }
}
</script>
wanxinwl
关注
Vue过渡 & 动画&混入
孙叫兽的博客
12-13 1295
目录 过渡 自定义过渡的类名 同时使用过渡和动画 显性的过渡持续时间 JavaScript 钩子 初始渲染的过渡 多个元素的过渡 Vue.js 混入 选项合并 全局混入 过渡 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。 语法 <transition name = "nameoftransition"> <div></div>
Vue3 – 实现过渡动画
weixin_56663198的博客
07-18 1741
1 认识Vue的动画原理 2 动画中常见类的作用 3 animation动画实现 4 动画的常见属性设置 5 列表元素动画组实现 6 列表元素的移动动画
Vue3学习之旅-Vue3过渡&动画实现
听雨少年的博客
08-14 2455
Vue3过渡&动画实现 动画 认识动画 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验： React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库 react-transition-group； Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果； 我们来看一个案例： Hello World的显示和隐藏； 通过下面的代码实现，是不会有任何动画效果的； 没有动画的情况下
v-if v-else 组件显示隐藏的动画效果
最新发布
2201_75874827的博客
09-13 286
组件，可以用来在元素的进入和离开时添加动画效果。你可以结合 CSS 动画或者过渡来实现平滑的显示效果。当我们显示隐藏，切换组件的时候效果特别的生硬，我们需要用到动画来缓解一下。属性会平滑地从 0 到 1 变化，或从 1 到 0 变化。当元素进入和离开时，它的。在这个示例中，我们定义了一个名为。Vue 提供了一个内置的。
16_Vue3动画(一)之动画的基本使用及animate.css库的使用
酒客的博客
02-12 2572
Vue3动画的基本使用及animate.css库的使用 认识动画 在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验： React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group； Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果； 我们来看一个案例： Hello World的显示和隐藏； 通过下面的代码实现，是不会有任何动
vue3过渡动画详解
weixin_47450807的博客
02-11 7539
一、vue中动画简单介绍 在vue中如果一些过程不存在动画效果，则表现出来的结果是比较生硬的。此时我们需要设置动画来使得页面更加灵活。 如上面代码所示，我们的h1只是在消失和显示来回切换，但是这样效果生硬。 此时我们使用transition组件来实现动画效果。 二、vue的transition动画 transition组件可以添加name属性,注意name属性值可以为class样式的第一个字符串。上面例子会在出现和消失会展示出来opacity渐变的情况。 三、transition组件的实现原理 上面的图
【Vue3 第二十三章】Transition 过渡动画
前端知识分享喵
03-04 3673
`` 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。
Vue.js 过渡 & 动画
12-13
Vue默认使用CSS过渡和动画来实现效果。过渡可以通过`transition`属性定义，而动画则使用`@keyframes`规则创建。在CSS中，`v-enter`、`v-enter-active`、`v-enter-to`、`v-leave`、`v-leave-active`和`v-leave-to`...
Vue运用transition实现过渡动画
10-17
Vue中的过渡动画主要依赖于`<transition>`组件，它可以应用在元素、组件或动态组件上，配合CSS动画或者JavaScript钩子函数，实现各种复杂的过渡效果。在本篇文章中，我们将深入探讨如何使用`<transition>`来实现过渡...
Vue 过渡 & 动画
彳亍
01-22 1728
概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 单元素/组件的过渡 Vue 提供了 tr...
vue过渡&动画，学习日志
weixin_45124398的博客
03-29 287
vue在插入、更新、移除dom时提供多种方式的应用过渡效果 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 单元素、组件的过渡 在vue的transition标签中封装要使用过渡动画的组件或元素。 只有组件进入、离开时才可以使用过渡动画。 在条件渲染，条件展示、动态组件、组件根节点中可以给任何元素添加过渡动画 练习时的实例 <button @click="show
Vue3过渡 & 动画实现
nanxing的博客
06-15 2193
Vue3过渡 & 动画实现Vue3动画基本使用transition组件的原理过渡动画的class命名规则`transition实现`过渡实现动画实现动画和过渡同时存在点击按钮切换案例`transition`的自定义class当动态组件遇到 `transition``transition`结合`Animate.css`使用组件内使用通过Animate.css提供的 className通过动画名字transition的动画的钩子函数`transition`结合`gsap`使用列表过渡`transitio
vue3：过渡和动画
weixin_41897680的博客
06-04 1003
vue3：过渡和动画
vue3中使用过渡动画transition
m0_68716504的博客
03-25 391
参考vue3官方文档。
Vue中实现过渡动画
m0_71485750的博客
08-09 3234
目前为止，过渡动画我们只要是针对单个元素或者组件的：要么是单个节点；要么是同一时间渲染多个节点中的一个；那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？这个时候我们要使用组件来完成；使用有如下的特点：默认情况下，它不会渲染成任何一个元素，但是你可以指定一个元素并以 tag attribute 让他进行渲染；过渡模式不可用，因为我们不再相互切换特有的元素；...
vue3过渡动画
热门推荐
wa_2021的博客
04-19 1万+
1、transition定义动画 (html) <transition name="fade" mode="out-in"> <router-view class="show"></router-view> </transition> 2、css中编写 .fade-enter-active, .fade-leave-active { //fade-enter-active：定义进入过渡生效时的状态,fade-leave-active：定..
Vue3过渡动画实现
baidu_41388533的博客
05-24 512
Vue3过渡动画实现 参考王红元老师Vue课程 基本概念 React框架本身并没有提供任何动画相关的API，所以在React中使用过渡动画我们需要使用一个第三方库react-transition-group； Vue中为我们提供一些内置组件和对应的API来完成动画，利用它们我们可以方便的实现过渡动画效果； Vue Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡： 基本使用示例 <template> <div&gt
vue3 ＜transition＞ 组件过渡动画速过
gaotlantis的博客
07-16 1005
Vue 2.x 中就已经引入的，用于实现元素的过渡动画效果。它允许开发者在元素被插入、更新或移除时应用动画。Vue 3.x 中继续支持并改进了组件，包括对过渡类名的调整以提高清晰度（如使用等）
Vue3过渡&动画实现
weixin_45732235的博客
01-04 1029
Vue3过渡&动画实现
Vue实现列表滚动过渡动画详解
"本文将详细介绍如何在Vue框架中实现列表滚动的过渡动画，结合示例代码，提供了一种实现方式，适用于对Vue有兴趣并希望在项目中应用过渡动画的开发者。" 在Vue中，实现列表滚动过渡动画可以提升用户体验，尤其是在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值