Recently, I encountered the problem that Appear cannot take effect when learning vue3 animations
Specific manifestations of the problem:
Looking at the following code, it should be said that if we set fuct-appear-from,fuct-appea-active, there should be an effect when the element initially appears.
html
<Transition name="fuct" appear> <div class="doc" v-if="show"></div> </Transition>
css
/* First time effect */
.fuct-appear-active{
transition: all .3s ease-in-out;
}
.fuct-appear-from{
transform: translateY(7em);
}
/* Enter and leave animation */
.doc{
width:50px;
height:50px;
background-color: red;
}
.fuct-enter-from,
.fuct-leave-to{
transform: translateX(2em);
}
.fuct-enter-active,
.fuct-leave-active{
transition: all .5s ease-out;
}If you set the above attributes and styles like me, it means that you, like me, do not understand the meaning of appear "first time"
Let me talk about the syntax error in the code first. First of all, there is no animation settings like *-appear-from, etc., and only the custom animation attributes of appear-active-class, which is why I have always believed that animations do not take effect.
Solve other issues and questions
What is "first time"?
First of all, we need to understand the problem that occurs for the first time. This first time refers to the first time of the page under the default rendering. Simply put, this element is displayed by default, that is, the default show in v-if="show" is true. If the default is an element that is not displayed, it will be ineffective after appear setting.
What is the first animation?
After solving the first animation, some people think that this first animation should be a little special, so they think there should be a *-appear-from css setting, but in fact there is no. I don’t know why my VScode pops up the prompt. In fact, this first animation calls the entry animation, that is, the *-enter-from series animation,
Because by default, if the element is displayed by default, the animation element will not be called, after setting appear, the default rendering will be performed to enter the animation;
Runable debugging code, try to delete the internal appear refresh page, and you will understand
<template>
<button @click="show=!show">click</button>
<Transition name="fuct" appear-from-c>
<div class="doc" v-if="show"></div>
</Transition>
</template>
<script setup>
import { ref } from 'vue'
const show=ref(true)
</script>
<style>
/* First time effect */
fo-appear-active{
transition: all .3s ease-in-out;
}
fo-appear-from{
transform: translateY(7em);
}
/* Enter and leave animation */
.doc{
width:50px;
height:50px;
background-color: red;
}
.fuct-enter-from,
.fuct-leave-to{
transform: translateX(2em);
}
.fuct-enter-active,
.fuct-leave-active{
transition: all .5s ease-out;
}
</style>Summarize
appears is a property that calls to enter the animation when the element is displayed by default, so that the element executes the attribute of entering the animation when the element is displayed for the first rendering.
Of course, if you set properties such as appear-from-class, it will be executed at the same time as entering the animation
Another version is to customize the first animation of class, you will find that appear will call enter to enter anyway, unless you do not set enter animation
<script setup>
import {ref} from 'vue'
const show=ref(true);
</script>
<template>
<button @click="show = !show">Ckick</button>
<Transition name="fuct" appear
appear-active-class="active"
appear-to-class="to"
>
<div class="doc" v-if="show"></div>
</Transition>
</template>
<style>
.active{
transition: all .3s ease-in-out;
}
.to{
transform: translateY(7em);
}
.doc{
width:50px;
height:50px;
background-color: red;
}
.fuct-enter-from,
.fuct-leave-to{
transform: translateX(2em);
}
.fuct-enter-active,
.fuct-leave-active,
.fuct-appear-active{
transition: all .5s ease-out;
}
.fuct-appear-from{
transform: translateY(6em);
}
</style>How to use appear
Please check the summary part of the failure problem before reading this section
Although the css of *-appear-from is not set, the custom property of appear-from-class is retained.
For content without other animation requirements, only a special animation is needed to enter. We only need to set the following custom animation properties, appear-active- or use enter animation, and only set appear is easy to confuse, and enter will be reused.
This attribute is mainly a supplement to page animation. It provides a smoother display for elements displayed on the page at the beginning. The actual environment is based on the use of enter and class animation forms.
When the entry and class are set at the same time
Enter and class will run at the same time
When enter and class have an animation content conflict, the application level of enter is higher than that of class's custom animation, which will even invalidate all the animations of class.
This is the end of this article about Vue3 appears invalid How to use Appear. For more related content about Vue3 appears, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!