Vue portal, scroll to the visualization area to display the animation effect scheme

1. Prepare two tool libraries:

(1.1) animate.css: animation library

(Animation effect display: Animate.css | A cross-browser library of CSS animations. )

(1.2) wowjs: Responsible for scrolling to the visual area and displaying animate.css animation

2. Code implementation

(2.1) Plug-in installation

npm install wowjs --save-dev
npm install animate.css --save

(2.2) Add code to main.js

//动画
// 使用样式库
import animated from 'animate.css';
Vue.use(animated);

// 滚动动画 wow.js
import {
  WOW
} from 'wowjs'
Vue.prototype.$wow = new WOW({
  boxClass: 'wow', // default
  animateClass: 'animated', // default
  offset: 50, // default
  mobile: true, // default
  live: false,

  // live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.

  callback: function (box) {
    console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
  }
});

(2.3) Code in the xx.vue file that needs to execute animation

<template>
    <li class="wow animate__animated animate__fadeInRight">
        <!-- 需要执行的动画内容 -->         
    </li>
</template>
<script>
export default {
  name: 'News',
  mounted() {
    this.$nextTick(() => {
      this.$wow.init()
    })
  }
}
</script>

3. Introduction to wowjs simple attributes

Property/Method Type Default value Description
boxClass String 'wow' The class of the element that needs to be animated
animateClass String 'animated' animation.css The class
offset of the animation Integer 0 The distance from the visible area to start the animation
mobile Boolean value true Whether it is moving Execute animation
live on the device Boolean value true Whether the content loaded asynchronously is valid

(3.1) When offset is 0, the animated element executes action when it appears in the browser's visible area.

(3.2) After completing the initialization, add the class name of the relevant animation to the element that needs to be animated.

<div class="wow animate__animated animate__fadeIn">900</div>
wow is the animation class name in the configuration, necessary!
animate__animated animate__fadeIn is the animation effect of animate.css

1. Customize the animation duration.
Add data-wow-duration="2s"
<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">900</div>

2. Customize the animation delay time
and add data-wow-delay="5s"
<div class="wow animate__animated animate__fadeIn" data-wow-delay="5s">900</div> 3.

Customize the scrolling distance
and add data- wow-offset="200" Effect: Start animation when the element is 200 away from the visible area (the distance from the top of the element to the bottom of the browser) <div
class="wow animate__animated animate__fadeIn" data-wow-offset="200">900 </div>

4.

<div class="wow animate__animated animate__fadeIn" data-wow-iteration="2" >900</div>

If you want the animation to repeat infinitely, use data-wow-iteration="infinite"
<div class="wow animate__animated animate__fadeIn " data-wow-iteration="infinite" >900</div>

Vue portal, scroll to the visualization area to display the animation effect scheme

Guess you like