A, touch fish to have no website how line?

The premise of using this animation must be the official website of this animation, and I have moved the address here ~

The animate. Style / # best – pract…

Two, with the url will not install how happy to touch fish?

Install using NPM:

$ npm install animate.css --save
Copy the code

Yarns:

$ yarn add animate.css
Copy the code

Or use CDN to add it directly to your web page:

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

Three, after installation or introduction, will not use is very awkward ~

Basic usage

Transition tag, using animate requires a fixed prefix before the name of the animation class to be introduced (animate__animated)

<transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated Animate__fadeOut "> <div :v-show="isShow" class="div_box">Copy the code

I’m getting lazy here, so don’t do what I did, but I’m going to define a toggle Boolean event for visualizing the animation

export default { data() { return { isShow:true }; }},Copy the code

Style sheet DIV_box Box style

.div_box{ 
    width: 400px;
    height: 400px; 
    background: red; 
}
Copy the code