search
HomeWeb Front-endVue.jsHow to implement transition animation in Vue3? Component and animation library method analysis

How to implement transition animation in

Vue? The following article will introduce to you two methods of implementing transition animation in Vue3 (transition component and animation library). I hope it will be helpful to you!

How to implement transition animation in Vue3? Component and animation library method analysis

In actual development, in order to increase user experience, transition animation is often used, and transition animation is used in CSS through transition and animation are implemented. In Vue, Vue itself has some built-in components and APIs that can help us easily implement transition animation effects; let’s learn about them next.

Vue’s transition component

Vue provides the transition component, which can be an element in one of the following situations. Automatically add entering/leaving transition effects:

  • Use v-ifConditional rendering
  • Use v-showConditional display
  • Dynamic component
  • Component root node

The usage method is also relatively simple. You need to use the component or element that needs animation display<transition></transition> Just wrap the component and define a set of class. [Related recommendations: vue.js video tutorial]

Transition demo

The following code shows <transition></transition> Basic usage of components:

<template>
  <button class="btn btn-primary" @click="helloWorldShow = !helloWorldShow">
    显示与隐藏
  </button>
  <br />
  <img src="/static/imghwm/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>

The running results of the code are as shown below:

How to implement transition animation in Vue3? Component and animation library method analysis

##Some

class used above, their The meaning is as follows:

  • v-enter-from: Defines the starting state of the entry transition. It takes effect before the element is inserted and is removed on the next frame after the element is inserted.
  • v-enter-active: Defines the state when the entry transition takes effect. Applies throughout the transition, takes effect before the element is inserted, and removes after the transition/animation completes. This class can be used to define process times, delays and curve functions for entering transitions.
  • v-enter-to: Defines the end state of the entry transition. Takes effect the next frame after the element is inserted (at the same time v-enter-from is removed), and is removed after the transition/animation is complete.
  • v-leave-from: Defines the starting state of the leave transition. It takes effect immediately when the leaving transition is triggered and is removed the next frame.
  • v-leave-active: Defines the state when the leave transition takes effect. Applies throughout the exit transition, takes effect immediately when the exit transition is triggered, and removes after the transition/animation completes. This class can be used to define process times, delays and curve functions for exit transitions.
  • v-leave-to: Leave the end state of the transition. Takes effect the next frame after the leave transition is triggered (at the same time v-leave-from is removed), and is removed after the transition/animation completes.
The following picture is a picture from the Vue documentation, which perfectly explains the entire process

How to implement transition animation in Vue3? Component and animation library method analysis

class naming rules

The class name of the component does not have to be prefixed with v-. In fact, we can customize the prefix, just You need to add a name attribute, for example , then all prefixes become ywz-.

Using animation

Earlier we used the

transition attribute to achieve the transition effect of the component entering and leaving. Now we can use animation Attribute implementation, the sample code is as follows:

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

css

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

The code running result is as follows:

How to implement transition animation in Vue3? Component and animation library method analysis

Transition Mode

Let’s look at a problem first. When the animation switches between two elements, a problem will occur. The code to reproduce this problem is as follows:

<template>
  <button class="btn btn-primary" @click="show = !show">显示与隐藏</button>
  <br />
  <transition>
    <hello-world v-if="show" msg="【一碗周】过渡动画演示demo" />
    <img src="/static/imghwm/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>

The running effect is as follows:

How to implement transition animation in Vue3? Component and animation library method analysis

We can see that two components exist at the same time at the same time. Sometimes we don’t need this effect, then we need Set the transition mode of the

component, which is the mode attribute, which contains three values:

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

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

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

现在的运行结果如下:

How to implement transition animation in Vue3? Component and animation library method analysis

appear属性

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

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

How to implement transition animation in Vue3? Component and animation library method analysis

animate.css库的使用

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

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

  • 安装animate.css

npm i animate.css
  • 引入animate.css

// main.jsimport &#39;animate.css&#39;

使用动画序列

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

使用自定义过渡class

<transition></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/imghwm/default1.png"  data-src="./assets/logo.png"  class="lazy"  v-if="show" alt="Vue logo"  />
</transition>

写在最后

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

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

更多编程相关知识,请访问:编程视频!!

The above is the detailed content of How to implement transition animation in Vue3? Component and animation library method analysis. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:掘金社区. If there is any infringement, please contact admin@php.cn delete
Netflix: Exploring the Use of React (or Other Frameworks)Netflix: Exploring the Use of React (or Other Frameworks)Apr 23, 2025 am 12:02 AM

Netflix chose React to build its user interface because React's component design and virtual DOM mechanism can efficiently handle complex interfaces and frequent updates. 1) Component-based design allows Netflix to break down the interface into manageable widgets, improving development efficiency and code maintainability. 2) The virtual DOM mechanism ensures the smoothness and high performance of the Netflix user interface by minimizing DOM operations.

Vue.js and the Frontend: A Deep Dive into the FrameworkVue.js and the Frontend: A Deep Dive into the FrameworkApr 22, 2025 am 12:04 AM

Vue.js is loved by developers because it is easy to use and powerful. 1) Its responsive data binding system automatically updates the view. 2) The component system improves the reusability and maintainability of the code. 3) Computing properties and listeners enhance the readability and performance of the code. 4) Using VueDevtools and checking for console errors are common debugging techniques. 5) Performance optimization includes the use of key attributes, computed attributes and keep-alive components. 6) Best practices include clear component naming, the use of single-file components and the rational use of life cycle hooks.

The Power of Vue.js on the Frontend: Key Features and BenefitsThe Power of Vue.js on the Frontend: Key Features and BenefitsApr 21, 2025 am 12:07 AM

Vue.js is a progressive JavaScript framework suitable for building efficient and maintainable front-end applications. Its key features include: 1. Responsive data binding, 2. Component development, 3. Virtual DOM. Through these features, Vue.js simplifies the development process, improves application performance and maintainability, making it very popular in modern web development.

Is vue.js better than React?Is vue.js better than React?Apr 20, 2025 am 12:05 AM

Vue.js and React each have their own advantages and disadvantages, and the choice depends on project requirements and team conditions. 1) Vue.js is suitable for small projects and beginners because of its simplicity and easy to use; 2) React is suitable for large projects and complex UIs because of its rich ecosystem and component design.

Vue.js's Function: Enhancing User Experience on the FrontendVue.js's Function: Enhancing User Experience on the FrontendApr 19, 2025 am 12:13 AM

Vue.js improves user experience through multiple functions: 1. Responsive system realizes real-time data feedback; 2. Component development improves code reusability; 3. VueRouter provides smooth navigation; 4. Dynamic data binding and transition animation enhance interaction effect; 5. Error processing mechanism ensures user feedback; 6. Performance optimization and best practices improve application performance.

Vue.js: Defining Its Role in Web DevelopmentVue.js: Defining Its Role in Web DevelopmentApr 18, 2025 am 12:07 AM

Vue.js' role in web development is to act as a progressive JavaScript framework that simplifies the development process and improves efficiency. 1) It enables developers to focus on business logic through responsive data binding and component development. 2) The working principle of Vue.js relies on responsive systems and virtual DOM to optimize performance. 3) In actual projects, it is common practice to use Vuex to manage global state and optimize data responsiveness.

Understanding Vue.js: Primarily a Frontend FrameworkUnderstanding Vue.js: Primarily a Frontend FrameworkApr 17, 2025 am 12:20 AM

Vue.js is a progressive JavaScript framework released by You Yuxi in 2014 to build a user interface. Its core advantages include: 1. Responsive data binding, automatic update view of data changes; 2. Component development, the UI can be split into independent and reusable components.

Netflix's Frontend: Examples and Applications of React (or Vue)Netflix's Frontend: Examples and Applications of React (or Vue)Apr 16, 2025 am 12:08 AM

Netflix uses React as its front-end framework. 1) React's componentized development model and strong ecosystem are the main reasons why Netflix chose it. 2) Through componentization, Netflix splits complex interfaces into manageable chunks such as video players, recommendation lists and user comments. 3) React's virtual DOM and component life cycle optimizes rendering efficiency and user interaction management.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)