


How 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!
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-if
Conditional rendering - Use
v-show
Conditional 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 'vue' import HelloWorld from './components/HelloWorld.vue' 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:
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-fromis 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-fromis removed), and is removed after the transition/animation completes.
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 thetransition 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:
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 'vue' import HelloWorld from './components/HelloWorld.vue' const show = ref(true) </script> <style> /* 省略 */ </style>The running effect is as follows:
了解这个属性之后,我们将代码修改一下,修改后如下: 现在的运行结果如下: 如果我们在实际的开发中自己去一个一个的编写这些动画序列,那么效率是比较低下的,所以我们经常会用到一些动画库,最常见的就是 现在我们就来看那一下如何在Vue中使用 安装 引入 他们的优先级会高于普通的类名。 本篇文章介绍了过渡的基本使用,掌握Vue提供的 除了单个组件的过渡外,Vue还提供了TransitionGroup组件,用于实现多个组件的过渡动画,我们以后介绍。 更多编程相关知识,请访问:编程视频!! 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>
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>
animate.css库的使用
animate.css
。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></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>
写在最后
<transition></transition>
组件配合animate.css
可以轻松实现过渡动画。
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!

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 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.

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.

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 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' 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.

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 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.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Zend Studio 13.0.1
Powerful PHP integrated development environment

SublimeText3 Chinese version
Chinese version, very easy to use

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
The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Mac version
God-level code editing software (SublimeText3)