As we all know, the transition tag in vue can be easily animation transitions, and the method of using it is also very simple.
<transition name="The name you want"> Transitional elements... </transition>
The main point here is that the transition element can only be one of the following:
Conditional Rendering (using v-if)
Conditional display (using v-show)
Dynamic Components
Component root node
Commonly used transition names include fade, etc.
You can use this
<transition name="fade"> Transitional elements... </transition>
The effect achieved is fading in and out.
If you need to customize transition animation, remember to modify the following class name in css:
The name you want -enter
The name you want -enter-active Transition time and function of entry
The name you want -enter-to
The name you want -leave
The name you want -leave-active Transition time and function of departure
The name you want -leave-to
I believe everyone can simply use transition after writing this.
Please read the following code:
<transition name="fade">
<div v-if="show">
<div class="item-box"></div>
</div>
<div v-else>
<span>No more yet</span>
</div>
</transition>
The result is that there is no fading effect at all. So what causes the transition to not work?
Here's the reason:
When elements with the same label name switch, you need to set a unique value through the key attribute to make Vue distinguish them, otherwise Vue will only replace the content inside the same label for efficiency. Even if technically not necessary, setting keys to multiple elements in the <transition> component is a better practice.
So you need to write this:
<transition name="fade">
<div v-if="show" key="box1">
<div class="item-box"></div>
</div>
<div v-else key="box2">
<span>No more yet</span>
</div>
</transition>
Refresh and run to achieve perfect effect~~~~~
References:/v2/guide/
Replenish:
Question 1:Switching between different types of components has a transition effect, while switching between the same components (different contents) has no transition effect
Description of vue official website: When elements with the same label name are switched, a unique value needs to be set through the key attribute to make Vue distinguish them, otherwise Vue will only replace the content inside the same label for efficiency. Even if it is technically not necessary, setting keys to multiple elements in a component is a better practice.
Improved code
<transition :name="slide"> <keep-alive> <component :is="questionMap[]" :key="index" :currentQuestion="currentQuestion" :index="index"> </component> </keep-alive> </transition>
After adding key="index" to the component, no matter any type, there will be a transition effect, because at this time vue distinguishes each component into different components
Question 2:After the previous component slides out, the latter component has no sliding effect, but is directly displayed.
There is a problem with the transition mode: one leaves the transition and the other starts to enter the transition. This is the default behavior - entry and departure occur simultaneously, because this also causes the transition between the two cards to be less complex, and what we need is one to leave first and the other to enter.
The transitions that take effect simultaneously in and out cannot meet all requirements, so Vue provides a transition mode
- in-out: The new element first transitions, and after completion, the current element transitions away.
- out-in: The current element first transitions, and after completion, the new element transitions into.
Therefore, we need to add mode to the transition tag to achieve the effect:
<transition :name="slide" mode="out-in"> <keep-alive> <component :is="questionMap[]" :key="index" :currentQuestion="currentQuestion" :index="index"> </component> </keep-alive> </transition>
If you want to use list sorting, you need to use transition-group. Here is a simple example
<div class="demo">
<button v-on:click="add">Add</button>
<button v-on:click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
</div>
new Vue({
el: '#list-demo',
data: {
items: [1,2,3,4,5,6,7,8,9],
nextNum: 10
},
methods: {
randomIndex: function () {
return (() * )
},
add: function () {
((), 0, ++)
},
remove: function () {
((), 1)
},
}
})
.list-item {
display: inline-block;
margin-right: 10px;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.