Article Directory
foreword
This article shares an animation effect of switching between Vue page components, which is mainly applied to mobile devices, so that users can have a better interactive experience when switching pages or switching components, using the Transition component that comes with Vue3.
1. What is the Transition component?
Let me briefly introduce Transitionthe components first, from the official introduction:
<Transition>is a built-in component, which means it can be used in any other component without registration. It can apply entering and leaving animations to elements or components passed to it via default slots. Entry or exit can be triggered by one of the following conditions:
- Switch triggered by v-if
- Switch triggered by v-show
<component>Dynamic components toggled by special elements- Change special key attribute
To put it simply, Enter on the left is triggered when the element is created from scratch, v-enter-to is the final state of the element displayed on the page; Leave on the right is the opposite, triggering Leave when the element disappears on the page , from v-leave- The from state changes to the v-leave-to state. Knowing this, the next step is to apply the feature triggered by its component switching to write the animation effect of routing switching.
2. Animation effect
Analysis & Explanation:
Among them, both Home and About are components. Clicking on the navigation triggers component switching. Obviously, the above switching has two animation effects. When the page switches from the Home component to the About component, the Home corresponds to the Leave step, and About corresponds to the Enter step . , the whole is shifted from right to left, so from is translateX(0) and to is translateX(-100%) . Is it suddenly clear, then switch from About component to Home component and vice versa, Shift from left to right, but this is a bit special, it will be mentioned later, first look at the complete code.
3. Code
1. Page display
<template>
<div class="wrapper">
<!-- 导航条 -->
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
<!-- 动画区，设置flex布局 -->
<div class="animation">
<router-view v-slot="{ Component }">
<transition :name="transitionName">
<component :is="Component" />
</transition>
</router-view>
</div>
</div>
</template>
2. Animation switching logic
<script setup>
import {
RouterLink, useRouter } from 'vue-router';
import {
ref } from 'vue';
let transitionName = ref();
let router = useRouter();
router.beforeEach((to, from) => {
// 根据路由标记判断触发哪个动画
if (to.meta.index > from.meta.index) {
// 从右往左动画
transitionName.value = 'slide-right';
} else if (to.meta.index < from.meta.index) {
// 从左往右动画
transitionName.value = 'slide-left';
} else {
transitionName.value = '';
}
});
</script>
3. Routing file
// 省略部分代码
routes: [
{
path: '/',
name: 'home',
component: HomeView,
meta: {
index: 1
}
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue'),
meta: {
index: 2
}
}
]
4. Style
.wrapper {
overflow-x: hidden;
.animation {
display: flex;
width: 200%;
& > div {
width: 50%;
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: transform 0.3s;
}
.slide-right-enter-from {
transform: translateX(0);
}
.slide-right-enter-to {
transform: translateX(-100%);
}
.slide-right-leave-from {
transform: translateX(0);
}
.slide-right-leave-to {
transform: translateX(-100%);
}
.slide-left-enter-from {
transform: translateX(-200%);
}
.slide-left-enter-to {
transform: translateX(-100%);
}
.slide-left-leave-from {
transform: translateX(0);
}
.slide-left-leave-to {
transform: translateX(100%);
}
}
}
5. Implementation principle
Check out the slow motion demo:
It can be seen from this dynamic diagram that the new component is added to the DOM immediately during the component switching process, and the removal of the old component is to wait for the animation to end before removing, so when the flex layout is defined in the outer layer, it will be arranged horizontally . In addition, Transitiona new component element is always inserted under the old component element, so when moving from left to right mentioned at the beginning, according to the flex layout positioning, the home component is originally located on the right side of about when the animation starts, but it must be located about left, so set its translateX(-200%) .
四、One More Thing
1. Realize
From the dynamic diagram above, we can actually find that when the element enters , the styles of v-enter-active and v-enter-to are added to the element. Of course, the process of leaving is similar. If you want to ask why you didn't see v-enter-from and v-leave-from, then we can know from the official documentation:
v-enter-from: Enter the starting state of the animation. Added before element insertion, removed in the next frame after element insertion is complete.
v-leave-from: Leaves the starting state of the animation. Added immediately when the exit transition is triggered, removed one frame later.
So it’s normal not to see it. We can implement this process according to the ideas given in the document, such as adding a transition effect for mask layer elements:
const overlayNode = document.createElement('div');
overlayNode.className = 'my-overlay';
// 添加初始显示的过渡效果
overlayNode.classList.add('my-overlay-enter-from');
overlayNode.classList.add('my-overlay-enter-active');
// 在body标签内部插入此元素
document.body.appendChild(overlayNode);
const nextClass = () => {
overlayNode.classList.remove('my-overlay-enter-from');
overlayNode.classList.add('my-overlay-enter-to');
};
// 元素插入完成后的下一帧触发
requestAnimationFrame(nextClass);
// 在过渡或动画完成之后移除
setTimeout(() => {
overlayNode.classList.remove('my-overlay-enter-to');
overlayNode.classList.remove('my-overlay-enter-active');
}, 300);
The style can be defined by yourself, I will not show it here, or you can refer to the process of adding a mask layer to the Dialog component in my previous article .
2. Various ways of writing
When we know the principle, the writing can be very flexible. For example, we can change it to this to add animation to the transition effect:
$slide-duration: 3s;
.slide-left-enter-active {
animation: slide-left-in $slide-duration;
}
.slide-left-leave-active {
animation: slide-left-out $slide-duration;
}
.slide-right-enter-active {
animation: slide-right-in $slide-duration;
}
.slide-right-leave-active {
animation: slide-right-out $slide-duration;
}
@keyframes slide-left-in {
0% {
transform: translateX(-200%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes slide-left-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
@keyframes slide-right-in {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes slide-right-out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
Both v-enter-active and v-leave-active are applied to the entire entry animation stage, and it is also possible to directly customize and add animation by using the animation property of CSS.
Summarize
The above is all the content. This article shares the Transition component of Vue3, which can realize transition and animation effects based on state changes. This article just briefly introduces the usage method and makes a page switching animation effect. Many animation effects need to be further explored, and you can study by yourself.
If this article is helpful to you, you are welcome to [Like] and [Favorite]! You are also welcome to [comments] to leave valuable comments, discuss and learn together~