In-depth understanding of Vue transition and animation

1. When inserting, updating, or removing DOM elements, add style class names to the elements when appropriate

2. The element has an entry process: Enter and a leaving process: Leave.

Both processes have an initial state () and a terminal state (-to) and a transition effect (activate) between the two states.

3. Writing

Animation : Write v-enter-active（替換come這個名字）和v-leave-active（替換go）（這兩個是vue的工作） and動畫atguigu（這個是css3的效果） . Just wrap the animation elements with <transition>. appear is to execute v-enter-activate once the element is loaded

Transition : The starting point and end point here are the role of Vue.

or

<style scoped>
/* .todo-enter-active{
    animation: myAnamite 1s;
}
.todo-leave-active{
    animation: myAnamite 1s reverse;
}
@keyframes myAnamite {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0);
    }
} */
.todo-enter,.todo-leave-to{
    transform: translateX(-100%);
}
.todo-leave,.todo-enter-to{
    transform: translateX(0);
}
.todo-enter-active, .todo-leave-active {
    transition: 1s linear;
}
</style>

Multiple elements overload:

Third-party animation library: anamite.css庫

Install:

Import: import 'animate.css' in script

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!