webpack中使用wowjs和animate.css

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。
官网:https://daneden.github.io/animate.css
github:https://github.com/daneden/animate.css

WOW.js可以在页面向下滚动的过程中播放这些动画效果,还可以为动画设置喜欢的风格、延迟、长度、偏移和迭代等。
官网:http://mynameismatthieu.com/WOW
github:https://github.com/matthieua/WOW

在webpack中使用也很简单,按如下步骤操作即可:
1.首先使用npm安装wowjs
npm install wowjs --save-dev
animate.css会自动安装。
2.在js文件中添加如下代码

import 'animate.css'
import {WOW} from 'wowjs';
new WOW({live: false}).init();

如果不添加live: false,控制台会提示:MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.

参考:
1.https://stackoverflow.com/questions/35099440/wow-js-with-webpack-and-react
2.https://github.com/matthieua/WOW/issues/234

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录: 1-------- 走进前端 2-------- jQuery 3-------- CSS ...
    vikang阅读 11,120评论 29 445
  • 早上,骑车悠然走在上班路上,不由地还哼起了小曲儿。那调调是刀郎的《永远的兄弟》,“曾经的日子闪亮又明媚,你我一起分...
    刘素练习阅读 407评论 0 0
  • 为什么一定要有人陪同 才不显得孤单 为什么要用那种带着意味的眼神掠过我 当我一个人吃午餐 一个人看电影 一个人撑伞...
    热带的热爱蝶阅读 226评论 0 0
  • (一) 今天的我有些苦恼,学习好像进入了瓶颈期。这些天,流利说“懂你”的学习效率一下子从100降到了85。 我的学...
    小维维_d991阅读 216评论 0 0
  • 应邀写一点使用Node.js爬点资料的实例,对于大家建站爬一些初始资料或者做分析研究的小伙伴们应该有些帮助。 目标...
    程序猿DD阅读 2,582评论 6 37