Nuxtjs uses wow.js+animate. CSS to scroll loaded animations

Recently, I made an official website (Nuxt is used in the technology stack). I needed to slide to the visual area to trigger the animation effect. Almost all the pages had to “move”, and handwriting was exhausting. I found that wow.js+animate. CSS could meet my needs.

animate.css

Animate. CSS is a collection of animation effects created using CSS3 animation. Animate. CSS is a collection of animation effects created using CSS3 animation.

Website:Daneden. Making. IO/animate. CSS…Making:Github.com/daneden/ani… Since you rely on animate. CSS when following WowJS, it will be installed automatically, so we won’t cover the installation method here.

<h1 class="animate__animated animate__bounce">Example</h1>
Copy the code

Just add animate__animated and the name of a special effect to the class to use it. And then it has a bunch of advanced uses:

• Animation delay time:

<h1 class="animate__animated animate__infinite animate__bounce animate__delay-2s">Example</h1>Animate__delay - 2 s: perform animation animate__delay again after 2 seconds - 3 s: 3 seconds and then perform an animation animate__delay - 4 s: 4 seconds before performing animation animate__delay - 5 s: 5 seconds before you perform the animationCopy the code

• Animation duration:

<div class="animate__animated animate__bounce animate__faster">Example</div>Animate__slow: animate__slower completed with 2s Slower: animate__fast completed with 800ms Animate__faster: completed with 500msCopy the code

• Infinite loop animation:

<div class="animate__animated animate__bounce animate__infinite">Example</div>Animate__infinite: Infinite loopsCopy the code

WOW.js

1.

Because in Nuxt code is packaged twice on the Client and Server, the Client has window and Document objects, and on the Server there are no window and Document objects. So WowJS can only be introduced in devDependencies.

CSS, it supports animate. CSS up to 60 kinds of animation effects, basic can meet a variety of needs, can not meet the need to customize. www.delac.io/wow/ GitHub: github.com/matthieua/W…

2. Install

npm install wowjs --save-dev
#or
yarn add wowjs --dev
Copy the code

As shown above, the installation is successful. You can see that Wow has automatically installed animate. CSS for usnuxt.config.jsTo introduce it into,

export default{...// Global CSS: https://go.nuxtjs.dev/config-css
  css: [...'animate.css/animate.css'],... }Copy the code

Next initialize WOW by introducing the following in the vue file where you need to use effects:

<script>
  if (process.browser) { // Introduce wow.js here based on the environment
    var {WOW} = require('wowjs')
  }
</script>
Copy the code

Instantiate WOW according to the environment in the lifecycle:

mounted() {
 this.$nextTick(() = > {
  if (process.browser) {  // Instantiate WOW according to the environment in the page mounted lifecycle
      new WOW({animateClass: 'animate__animated'}).init()
    }
  });
},
Copy the code

Note: new WOW().init(); “WOW” has to be capitalized, otherwise it won’t work. Because the valid variable in the WowJS source code is WOWNote: Why do I need to customize animateClass here?

Let’s look at the default property configuration in wow.js

WOW.prototype.defaults = {
  boxClass: 'wow'.animateClass: 'animated'.offset: 0.mobile: true.live: true.callback: null.scrollContainer: null
};
Copy the code

The default animateClass is animated, but classes in the latest versions of animate. CSS begin with animate__, for example

.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
Copy the code

So we need to change the default animateClass: ‘animated’ to animateClass: ‘animate__animated’ for animation to work.

Use 3.

Simply add wow to the class and an animate. CSS animation to create happy scrolling. Such as:

<h3 class="pro-alias text-right wow animate__rotateInUpRight">why</h3>
Copy the code

There are also many other configurations, such as:

<div class="wow animate__bounce " data-wow-delay="1.5 s"  data-wow-iteration="1"></div>
Copy the code

• Data-wow-duration: Changes the animation duration
• Data-wow-delay: The delay before the animation starts
• Data-wow-offset: the distance from which the animation starts (relative to the bottom of the browser)
• Data-wow-iteration: Animation iteration number (infinite: infinite)

4. Use custom animations

<p class="si-desc wow customSlideUpIn" v-for="(item, index) in (selectDetail.description)" :key="index">item</p>
Copy the code

CustomSlideUpIn is my custom animation, which is also ok.

Refer to the article

yelv.vip/230.html