Transition animation and keyframe animation in vue, and the use of animate.css And list transition

1, Transition animation

(1) Whether it's switching between components, or using v-if, v-show instructions to control the display of dom, as long as you want to achieve the animation effect, you must wrap it outside and give a name attribute to specify the use of the defined animation

 <div id="root">
        <transition name="fade">
            <component :is="type"></component>
        </transition>
        <button @click="change">change</button>
 </div>

(2) Start to define the animation. Because the name in front is fade, the class name defined in the following animation must start with fade.

 <style>
        .fade-enter,
        .fade-leave-to {
            opacity: 0;
        }

        .fade-enter-active,
        .fade-leave-active {
            transition: opacity 3s;
        }
 </style>

(3) Achieving results

2, keyframe animation

(1) We still use the transiton package and give a name, but the definition of animation in css is different.
The difference between keyframe animation and transition animation is that keyframe is a kind of insert frame animation. We can define the animation at different frames. Here we only define it at 0%, 50% and 100%. You can define more in the middle

(2) Define animation

<style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .fade-enter-active,
        .fade-leave-active {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
    </style>

(3) Achieving results

3, Use animate.css library

(1) In the past, we used name = "fade" to define a lot of animations. Of course, we can write a lot of animations in name, but less in definition. And use animate.css It has to be written like this.

① The transition tag says this

<div id="root">
        <transition enter-active-class="enter" leave-active-class="leave">
            <component :is="type"></component>
        </transition>
        <button @click="change">change</button>
    </div>

② Define animation to write like this

<style>
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        .enter,
        .leave {
            transform-origin: left center;
            animation: bounce-in 3s;
        }
    </style>

The effect is as like as two peas before.

(2) After learning how to rewrite name, we can use animate.css Library, described here, animate.css It belongs to animation with @keyframe, not transition animation.

① I use CDN method to import and store

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

② Use in the transition tab

<div id="root">
        <transition enter-active-class="animated bounce" leave-active-class="animated shake">
            <component :is="type"></component>
        </transition>
        <button @click="change">change</button>
</div>

animated required, followed by the type of animation

4, List transition

Just use traction group

 <div id="root">
        <transition-group enter-active-class="enter" leave-active-class="leave">
            <div v-for="item of list" :key="item.index">{{item.index}}---{{item.content}}</div>
        </transition-group>
        <button @click="change">change</button>
    </div>

result

Tags: Attribute less

Posted on Fri, 12 Jun 2020 02:20:01 -0400 by bal bal