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

The running results of the code are as shown below:

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

class naming rules

<transition>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:

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

The running effect is as follows:

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

<transition> 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/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组件，用于实现多个组件的过渡动画，我们以后介绍。

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

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!