在vue中使用 animate.css 和 wowjs 注意事项

最新推荐文章于 2024-07-25 17:03:07 发布

筱歌儿

最新推荐文章于 2024-07-25 17:03:07 发布

阅读量296

点赞数

文章标签： vue.js css 前端

本文链接：https://blog.csdn.net/shelter123456/article/details/133026090

版权

一、下载依赖

1、安装wowjs 和 animate.css

npm install wowjs -S
npm install animate.css -S

2、main.js 引用


import animated  from 'animate.css'
import wow from 'wowjs'

Vue.use(animated)
Vue.prototype.$wow = wow

3、使用页面 .vue 中添加类名和 mounted 写入方法

//注意：
// 1、animate.css版本4用wow animate__animated animate__slideInUp类
//eg：
// <div class="wow animate__animated animate__slideInUp animate__delay-1s"></div>
// 2、animate.css版本3用wow slideInUp类
//eg：
//<div class="wow slideInUp"></div>



<template>
<div class="wow animate__animated animate__fadeInDown notice_title" data-wow-delay=".3s" ></div>
</template>


mounted() {
	new this.$wow.WOW().init({
      boxClass: "wow",
      animateClass: "animate__animated",
      offset: 0,
      mobile: true,
      live: true,
    });
 }

4、如果 wowjs在vue项目中使用有个奇葩的现象，就是只有网页第一屏的动画可以显示，鼠标往下滚动不仅动画没出来，就连原来的html元素也没有显示出来成了一片空白。。。
改造
1、在node_modules/wowjs/dist/wowjs.js这个源文件里

//源代码
//WOW.prototype.isVisible = function(box) {
 //     var bottom, offset, top, viewBottom, viewTop;
 //     offset = box.getAttribute('data-wow-offset') || this.config.offset;
 //     viewTop = window.pageYOffset;
 //     viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
 //     top = this.offsetTop(box);
//      bottom = top + box.clientHeight;
 //     return top <= viewBottom && bottom >= viewTop;
//    };


//修改后
 WOW.prototype.isVisible = function(box) {
      var bottom, offset, top, viewBottom, viewTop;
      offset = box.getAttribute('data-wow-offset') || this.config.offset;
      viewTop = (this.config.scrollContainer && this.config.scrollContainer.scrollTop) || window.pageYOffset||document.body.scrollTop;
      viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
      top = this.offsetTop(box);
      bottom = top + box.clientHeight;
      return top <= viewBottom && bottom >= viewTop;
    };



2、将false 改为true
//源代码
Util.prototype.addEvent = function(elem, event, fn) {
      if (elem.addEventListener != null) {
        return elem.addEventListener(event, fn, false);
      } else if (elem.attachEvent != null) {
        return elem.attachEvent("on" + event, fn);
      } else {
        return elem[event] = fn;
      }
    };