Experience of Vue animation

Time:2021-1-17

Recently, I learned Vue’s animation. I think it’s very interesting. I wrote a small demo. I don’t have to say much about it~

<template>
    <div id="example">
        < p class = "toggle" @ Click = "show =! Show" > {{show?'move out ':'move in'}}</p>
        <transition
            name="fade">
            <div v-if="show" class="showBox">
                <h2>The main title is me</h2>
                <ul>
                    <li>I'm Title 1</li>
                    <li>I'm Title 1</li>
                    <li>I'm Title 1</li>
                    <li>I'm Title 1</li>
                    <li>I'm Title 1</li>
                </ul>
            </div>
        </transition>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                //The assignment shows the following
                show:true,
            }
        },
    }
</script>
<style>
    #example{
        width:300px;
        margin:0 auto;
    }
    .toggle{
        padding:10px 10px;
        background:green;
        color:#EFEFEF;
        cursor:pointer;
        font-size:16px;
        margin-bottom:20px;
    }
    .showBox{
        padding:10px 0;
        border:1px dashed #008000;
    }
    .fade-enter{
        opacity: 0;
        transform: translateX(50px);
    }
    .fade-leave-to{
        opacity: 0;
        transform: translateX(-50px);
    }
    .fade-enter-active,.fade-leave-active{
        color:#eee;
        transition:all 0.8s;
    }
</style>

effect:
Click the move out button to move the list block to the left and disappear gradually. Click the move in button to move the code block from right to left and display gradually.

The author will not upload dynamic pictures, take a look at the screenshot bar ~ ~


Experience of Vue animationExperience of Vue animationExperience of Vue animation


Realization idea:
1. Control whether the list is displayed through the true and false of show.
2. Use<transition>The encapsulated components add the transition effect of entering and leaving to the elements.
Implementation principle: before the initial state of animation insertion, I adjust the transparency of the list to 0, and make it move 50px to the right. Because,<transition>After the animation is finished, the class will be removed to return to the original effect. When I click trigger animation, I add animation duration (animation curve and so on) to the transition effect. It’s like, slowly fromTranslatex (50px) and opacity:1Back to the original stateTranslatex (0px) and opacity:1. Similarly, the removed animation is shifted 50px to the left with 0 transparency, adding animation duration to the removed transition effect. The effect of disappearing to the left is realized.

It’s easy, isn’t it? OK, the example is very simple ~, so the key point is, let’s review the animation of Vue.

Class name (. Class) for transition:

I’ve drawn a swimlane diagram of the transition state of the class name. Look here~

Experience of Vue animation

How about ~, a little flower is not ~, um… I like the fancy things in Huli

in general:

The v-enter element takes effect before it is inserted. Remove next frame
Before the v-enter-active element is inserted ~ after the transition / animation is completed. When the animation is complete, it is removed.
After the v-enter-to element is inserted ~ after the transition / animation is completed. When the animation is complete, it is removed.
V-leave takes effect when the transition is triggered. The next frame is removed
V-leave-active takes effect when the transition is triggered after the transition / animation is completed. When the animation is complete, it is removed.
V-leave-to after the transition is triggered, the next frame ~ after the transition / animation is completed. When the animation is complete, it is removed.

<transition>Components will have a default v-prefix, if used<transition name="name">, then v-enter is replaced by name enter.

Some students will think that you can write transform in the above. Class, so can you write animation?
Of course, there are differences. Official answer: the difference between CSS animation and CSS transition is that in animation, the v-enter class name will not be deleted immediately after the node is inserted into the DOM, but will be deleted when the animation end event is triggered.

OK, it’s time to get off work. Let’s get here today~

Have you ever seen. Class, thought of attribute attribute, self defining transition class name, JavaScript hook function, animation in function, multiple component transition, list transition… Attached to Vue website:https://cn.vuejs.org/v2/guide…

Thank you again for this open source era! Give us such a clear official document~