41 Vue uses third-party animation Libraries

Posted by assgar on Tue, 07 Dec 2021 03:48:27 +0100

elaborate

In this section, let's learn how to use the third-party animation library Animate.css in Vue.

There are many finished animations in it, which can bring great convenience to development.

Before learning how to use the third-party animation library, we should first learn a knowledge, which is to customize the fixed CSS animation selector in Vue.

Custom animation selection

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        @keyframes comein{
            0%{
                transform :translateX(-120px)
            }
            100%{
                transform :translateX(0px)
            }
        }
        @keyframes comeout{
            0%{
                transform :translateX(0px)
            }
            100%{
                transform :translateX(-120px)
            }
        }
        .v-enter-active{
            animation: comein 1s;
        }
        .v-leave-active{
            animation: comeout 1s;
        }

    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                isShow:false
            }
        },
        methods:{
            hanldClick(){
                this.isShow = ! this.isShow
            }
        },
        template: `  
        <transition>
            <div v-if="isShow">willem</div>
        </transition>
        <button @click="hanldClick">Toggle animation</button>
        `
    })
    const vm = app.mount("#app")
</script>
</html>

v-enter-active and v-leave-active are used in the code. The class names of fixed selectors in CSS are smelly and long. Is there any way to customize the names of these selectors.

I'll talk about two methods here. You can choose according to your needs.

Method 1: give the transition tag a name

This form is also called partial change, that is, by giving the < transition > tag a name attribute, and then the CSS selector will change accordingly. For example, first add the < transition > tag in the template to name='willembj '.

template: `  
    <transition name="willembj">
        <div v-if="isShow">willem</div>
    </transition>
`

At this time, you go to the browser to preview and find that all the animations can no longer be used.
At this time, you need to change the CSS selector to. Willembj enter active and. Willembj leave active. The CSS code is as follows.

.willembj-enter-active{
    animation: comein 1s;
}
.willembj-leave-active{
    animation: comeout 1s;
}

At this time, go to the browser to see the effect, and the animation effect will return to normal.

As mentioned, he can only modify some CSS selectors (that is, the first half) and change v-enter-active to willembj-enter-active.

This is often used when there are multiple animations on a page.

Method 2: make your own CSS and choose the name

This method is to directly specify a CSS style in the < transition > tag. This method is widely used and flexible in work.

Now write a new CSS style called come and go. The code is the same as the CSS code of v-enter-active and v-leave-active.

.come{
    animation: comein 1s;
}
.go{
    animation: comeout 1s;
}

With these two CSS codes, you can delete the above v-enter-active and v-leave-active styles in order to avoid confusion and prevent misunderstandings.

Then, in the template code, add the enter active class and leave active class attributes and specify the name.

template: `  
    <transition 
        enter-active-class="come"
        leave-active-class="go"
    >
        <div v-if="isShow">Code cloud notes front end blog</div>
    </transition>
`

You can define some complex animations with custom names, or you can use a third-party animation library, such as the Animate.css animation library.

Using third-party animation Libraries

When we know this custom method, we can use an animation library such as Animate.css.

Here is the website of the Gallery: https://animate.style

Directly enter the animation library, you can see that there are many animation effects on the left side of the web page. You can click to preview.

Now if you want to use this animation library, you can directly introduce the CDN address into the HTML page.

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

Then add animate to the label that you want to have animation__ Animated and other animation effects you want, such as animate__bounce (jumping animation), you can achieve a cool CSS animation effect.

template: `  
    <transition 
        enter-active-class="animate__animated animate__bounce"
        leave-active-class="animate__animated animate__bounce"
    >
        <div v-if="isShow">willem</div>
    </transition>
    <button @click="hanldClick">Toggle animation</button>
`

At this time, check the effect in the browser. The text at this time is to jump into and out of the page.

Of course, you can also try other effects, such as flash and heartBeat, which are very good effects.

summary

In this section, we learned three important knowledge points:

1. Methods of partially customizing animation CSS Styles
2. How to customize all animation CSS Styles
3. Use third-party CSS animation libraries to animate

Topics: css3 Vue Vue.js

Programmer Think