使用wowjs支持页面首次加载模块动画载以及原理解析

来陪人家玩游戏嘛

已于 2022-10-31 14:53:27 修改

阅读量573

点赞数

分类专栏： css vue 文章标签： javascript 前端 vue.js

于 2022-09-23 15:29:01 首次发布

本文链接：https://blog.csdn.net/gongliming_qd/article/details/127011685

版权

安装

cnpm install wowjs -S

根组件加入animate.css 的CDN

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css" />

使用

封装util注册方法

import {
    onMounted } from 'vue'
import {
    WOW } from 'wowjs'

// wow swing
export default () => {
   
  onMounted(() => {
   
    var wow = new WOW({
   
      boxClass: 'wow', // animated element css class (default is wow)
      animateClass: 'animated', // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
   
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true // reset animation on end (default is true)
    })
    wow.init()
  })
}