Vue3에서 전환 애니메이션을 구현하는 방법은 무엇입니까? 컴포넌트 및 애니메이션 라이브러리 방식 분석

Vue에서 전환 애니메이션을 구현하는 방법은 무엇입니까? 다음 기사에서는 Vue3(전환 구성 요소 및 애니메이션 라이브러리)에서 전환 애니메이션을 구현하는 두 가지 방법을 소개합니다. 도움이 되기를 바랍니다.

실제 개발에서는 사용자 경험을 높이기 위해 전환 애니메이션을 자주 사용하는데, CSS의 전환 애니메이션은 transitiontransition和animation实现的。而在Vue中，Vue本身中内置了一些组件和API可以帮助我们方便的实现过渡动画效果；接下来我们就学习一下。

Vue的transition组件

Vue中中提供了transition组件，该组件可以在下列情况之一的情况下，为元素自动添加进入/离开的过渡效果：

• 使用v-if条件渲染
• 使用v-show条件展示
• 动态组件
• 组件根节点

使用方式也比较简单，需要将需要动画展示的组件或者元素使用<transition></transition>组件包裹即可，然后定义一组class。【相关推荐：vue.js视频教程】

过渡demo

如下代码展示了<transition></transition>组件的基本用法：

<template>
  <button class="btn btn-primary" @click="helloWorldShow = !helloWorldShow">
    显示与隐藏
  </button>
  <br />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  alt="Vue logo"  />
  <transition>
    <hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const helloWorldShow = ref(true)
</script>

<style>
#app {
  /* more css */
}
/* 进入之前和离开后的样式 */
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}
/* 进入之后和离开之前的样式 */
.v-enter-to,
.v-leave-from {
  opacity: 1;
}
</style>

代码的运行结果如下图所示：

上面使用的一些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 被移除)，在过渡/动画完成之后移除。

下图是Vue文档中的一张图，完美解释了整个流程

class的命名规则

<transition>组件的class名称并不是必须以v-作为前缀的，其实我们可以自定义前缀，只需要添加一个name属性，例如<transition name="ywz">，那么所有的前缀全部变成了ywz-。

使用animation

前面我们使用了transition属性实现了组件进入和离开的过渡效果，现在我们可以使用animation属性实现，示例代码如下：

<transition>
  <hello-world v-if="helloWorldShow" msg="【一碗周】过渡动画演示demo" />
</transition>

css

/* 离开和进入过程中的样式 */
.v-enter-active,
.v-leave-active {
  /* 添加过渡动画 */
  transition: opacity 0.5s ease;
}

代码运行结果如下：

过渡模式

先看一个问题，当动画在两个元素之间切换的时候，会出现一个问题，复现这个问题的代码如下：

<template>
  <button class="btn btn-primary" @click="show = !show">显示与隐藏</button>
  <br />
  <transition>
    <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
    <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
  </transition>
</template>

<script setup>
import { ref } from &#39;vue&#39;
import HelloWorld from &#39;./components/HelloWorld.vue&#39;
const show = ref(true)
</script>

<style>
/* 省略 */
</style>

运行效果如下：

我们可以看到，在一瞬间两个组件是同时存在的，有的时候我们不需要这种效果，那么我们需要设置<transition>组件的过渡模式，也就是mode과 애니메이션

구현되었습니다. Vue에는 Vue 자체에 전환 애니메이션 효과를 쉽게 구현하는 데 도움이 되는 몇 가지 내장 구성 요소와 API가 있습니다. 🎜

Vue의 전환 구성 요소

🎜Vue는 다음 상황에서 사용할 수 있는 전환 구성 요소를 제공합니다. 어떤 경우에는 요소에 대한 진입/퇴장 전환 효과를 자동으로 추가합니다: 🎜

• v-if 조건부 렌더링 사용
• v-show조건부 표시
• 동적 구성요소
• 구성요소 루트 노드

🎜사용법도 상대적으로 간단합니다. 필요한 구성요소나 요소를 추가해야 합니다. 애니메이션 <transition> 구성 요소를 사용하여 래핑한 다음 클래스 집합을 정의하면 됩니다. [관련 권장 사항: 🎜vue.js 비디오 튜토리얼🎜]🎜

전환 데모

🎜다음 코드는 <transition> 컴포넌트의 기본 사용법: 🎜

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
</transition>

🎜코드의 실행 결과는 아래와 같습니다: 🎜🎜🎜🎜위에 사용된 일부 클래스, 해당 의미는 다음과 같습니다. 🎜

• v-enter-from: 항목 전환의 시작 상태를 정의합니다. 요소가 삽입되기 전에 적용되며 요소가 삽입된 후 다음 프레임에서 제거됩니다.
• v-enter-active: 항목 전환이 적용될 때의 상태를 정의합니다. 전환 전체에 적용되고 요소가 삽입되기 전에 적용되며 전환/애니메이션이 완료된 후에 제거됩니다. 이 클래스는 전환 입력을 위한 처리 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다.
• v-enter-to: 항목 전환의 종료 상태를 정의합니다. 요소가 삽입된 후(동시에 v-enter-from가 제거됨) 다음 프레임에 적용되며 전환/애니메이션이 완료된 후 제거됩니다.
• v-leave-from: 나가기 전환의 시작 상태를 정의합니다. 이탈 전환이 트리거되면 즉시 적용되며 다음 프레임에서 제거됩니다.
• v-leave-active: 나가기 전환이 적용될 때의 상태를 정의합니다. 종료 전환 전체에 적용되고, 종료 전환이 트리거될 때 즉시 적용되며, 전환/애니메이션이 완료된 후 제거됩니다. 이 클래스는 출구 전환에 대한 처리 시간, 지연 및 곡선 기능을 정의하는 데 사용할 수 있습니다.
• v-leave-to: 탈퇴 전환의 종료 상태입니다. 이탈 전환이 트리거된 후(동시에 v-leave-from가 제거됨) 다음 프레임에 적용되며 전환/애니메이션이 완료된 후에 제거됩니다.

🎜아래 사진은 Vue 문서에 있는 사진으로, 전체 과정을 완벽하게 설명하고 있습니다🎜🎜🎜

클래스 명명 규칙

🎜<transition>구성 요소의 class 이름에는 v- 접두사가 붙을 필요가 없습니다. 실제로 접두사를 사용자 정의할 수 있습니다. , <transition name="ywz">와 같은 name 속성을 ​​추가하면 모든 접두사가 ywz-가 됩니다. 🎜

애니메이션 사용

🎜 앞서 우리는 transition 속성을 ​​사용하여 구성 요소가 들어가고 전환되는 효과를 얻었습니다. 이제 animation 속성을 ​​사용하여 이를 달성할 수 있습니다. 샘플 코드는 다음과 같습니다. 🎜

<transition mode="out-in" appear>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

🎜css🎜

npm i animate.css

🎜코드 실행 결과는 다음과 같습니다. 🎜🎜

전환 모드

🎜 먼저 문제를 살펴보겠습니다. 애니메이션이 두 요소 사이를 전환할 때 문제가 발생합니다. 이 문제를 재현하는 코드는 다음과 같습니다. 🎜

// main.jsimport 'animate.css'

🎜실행 효과는 다음과 같습니다. 🎜 🎜🎜🎜보시다시피 두 개의 구성 요소가 동시에 존재합니다. 때로는 이 효과가 필요하지 않은 경우 전환 모드를 설정해야 합니다. <transition> 구성 요소는 mode 속성이며 다음 세 가지 값을 포함합니다. 🎜

• default：新元素与当前元素同时进行。
• in-out：新元素先进行进入过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行离开过渡，完成之后新元素过渡进入。

了解这个属性之后，我们将代码修改一下，修改后如下：

<transition mode="out-in">
  <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-else alt="Vue logo"  />
</transition>

现在的运行结果如下：

appear属性

<transition>组件的appear属性用于开启手册渲染的动画，它接受一个布尔值，示例代码如下：

<transition mode="out-in" appear>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

animate.css库的使用

如果我们在实际的开发中自己去一个一个的编写这些动画序列，那么效率是比较低下的，所以我们经常会用到一些动画库，最常见的就是animate.css。

现在我们就来看那一下如何在Vue中使用animate.css：

• 安装animate.css

npm i animate.css

• 引入animate.css

// main.jsimport 'animate.css'

使用动画序列

.v-enter-active {
  animation: fadeInDown 0.5s;
}
.v-leave-active {
  animation: fadeOutDown 0.5s;
}

使用自定义过渡class

<transition>组件还提供了属性来自定义过渡class，具体如下：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

他们的优先级会高于普通的类名。

<transition
  mode="out-in"
  enter-active-class="animate__animated animate__fadeInDown"
  leave-active-class="animate__animated animate__fadeOutDown"
>
  <img src="/static/imghw/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

写在最后

本篇文章介绍了过渡的基本使用，掌握Vue提供的<transition></transition>组件配合animate.css可以轻松实现过渡动画。

除了单个组件的过渡外，Vue还提供了TransitionGroup组件，用于实现多个组件的过渡动画，我们以后介绍。

更多编程相关知识，请访问：编程视频！！

위 내용은 Vue3에서 전환 애니메이션을 구현하는 방법은 무엇입니까? 컴포넌트 및 애니메이션 라이브러리 방식 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!