Use animation component library Magic.css in Vue scaffolding

1. Understand magic.css

Magic CSS3 Animations is a CSS animation library with special effects, you can use it for your web projects for free, simply refer to the CSS style: magic.css or magic.min.css (compressed version). This project provides a particularly cool demo application. Compared to animate.css, Magic CSS3 Animation is moderately sized, and its featured animations, such as magic effects, silly effects, and bomb effects, are outstanding and special.

2. Use Magic.css

1. Install magic.css

Three download methods are provided on the official website

GitHub Package Registry

npm install @minimac/magic.css

npm

npm i magic.css

yarn

yarn add magic.css

2. Import css styles globally

After executing the installation command, a magic.css directory will be generated in your folder node-moudle, find the dist directory, take out the magic.css file inside, and put it in the asset directory

 Then import the css file globally in mian.js

 In this way, the animation effect in magic.css can be used in all components

3. Use animation effects

In the component you created, use the animation template in vue to add classes to the elements you want to animate

If you don’t understand the animation in vue, you can go to the official website to check it

Enter/Leave & List Transitions — Vue.js Documentation

The animation effect can refer to the website

Magic Animation CSS3 (minimamente.com)

This is all the animation effects of magic

 For example, I loaded an entry animation and an exit animation for the box box, and the class name is the animation name

Add time to all animations

The magictime here is the class name defined by yourself, set this class on the element you want to add, and add animation time

.magictime {
    animation-duration: 3s;
}

Specific animation specified time

You can use two classes to set the time, the second magic is the animation name, which is your class name

.magictime.magic {
    animation-duration: 10s;
}

Special Note:

Set animation duration using custom transition class in animate.css

Set where you set the class

<transition
      enter-active-class="animate__animated animate__zoomIn animate__duration-0.5s"
      leave-active-class="animate__animated animate__zoomOut animate__duration-0.5s"
    >

animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms

Set animation delay time

<transition
      enter-active-class="animate__animated animate__zoomIn animate__faster"
      leave-active-class="animate__animated animate__zoomOut animate__faster"
    >

Set the number of animation executions

<transition
      enter-active-class="animate__animated animate__zoomIn  animate__iteration__count-10"
      leave-active-class="animate__animated animate__zoomOut animate__iteration__count-10"
    >