wow.js和animate.css,添加纯js和css的动画特效

wowjs的使用方式

例：

  <el-row class="header-main wow bounceInDown">
   </el-row>
 ** 需要的动画里面 class 里面 添加 wow 然后在添加动画样试 bounceInDown **

方式一：

第一步：安装 cnpm install wowjs --save-dev
第二步：在 main.js 中 引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’
第三步：在组件中使用

    import { WOW } from 'wowjs'
    mounted() {
        var wow = new WOW({
        boxClass: "wow",    //需要执行动画的元素的 class
        animateClass: "animated", // animation.css 动画的 class
        offset: 0, // 距离可视区域多少开始执行动画
        mobile: true, // 是否在移动设备上执行动画
        live: true // 异步加载的内容是否有效
        })
        wow.init();
     },
   // 或者 
   methods: {
     initWowAnimate() {
        const wow = new WOW({
            boxClass: "wow",    //需要执行动画的元素的 class
            animateClass: "animated", // animation.css 动画的 class
            offset: 0, // 距离可视区域多少开始执行动画
            mobile: true, // 是否在移动设备上执行动画
            live: false // 异步加载的内容是否有效
    })
    wow.init()
    }
 }
  watch: {
      $route(to, from) {
        if (to) {
            console.log('路由改变了----》', to)
            this.$nextTick(() => {
                this.initWowAnimate()
            })
        }
    }
————————————————
版权声明：本文为CSDN博主「cs_dn_Jie」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/cs_dn_Jie/article/details/112374251

方式二：

第一步：安装 cnpm install wowjs --save-dev
第二步：在 main.js 中 引入 css 样式 ‘import ‘wowjs/css/libs/animate.css’’
第三步：在 main.js 中 挂载 wow ‘Vue.prototype.WOW=wow"
第四步：在使用页面初始化中的mounted函数中初始化
'new this.wow.WOW().init()'　　

import { WOW } from 'wowjs'
    mounted() {
        new this.$wow.WOW().init()
},

参数 可写 可不写
data-wow-duration=‘2s’（动画持续时间)

data-wow-delay=‘1s’（动画延迟时间）

data-wow-offset=‘100’（元素的位置露出后距离底部多少像素执行）

data-wow-iteration=‘10’（动画执行次数）这四个属性可选可不选。
————————————————

原文链接：https://blog.csdn.net/cs_dn_Jie/article/details/112374251

方式三：

　　头部引用animate.css。底部引入wow.jsWi且初始化一下

<script src="js/wow.min.js"></script>
　　<script>
　　　　new WOW().init();
　　</script>

如需自动以配置，如下使用：

var wow = new WOW({
    boxClass: ‘wow‘,
    animateClass: ‘animated‘,
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

注意new WOW().init();中的WOW要大写，否则就没效果了。

【配置】

属性/方法	类型	默认值	说明
boxClass	字符串	‘wow’	需要执行动画的元素的 class
animateClass	字符串	‘animated’	animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效

例：

<div class="wow slideInLeft" 
    data-wow-duration="2s"
    data-wow-delay="5s"
    data-wow-offset="10"  
    data-wow-iteration="10"></div>

wow   必加
slideInLeft就是说明动画样式。（下面有其他效果说明）

data-wow-duration（动画持续时间）
data-wow-delay（动画延迟时间）
data-wow-offset（元素的位置露出后距离底部多少像素执行）
data-wow-iteration（动画执行次数）无限次：infinite
这四个属性可选可不选。

wow rollIn	从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn	从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp	从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown	从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft	从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRight	从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow slideInUp	从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown	从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft	从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight	从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX	原位置后仰前栽、透明度从100%变化至设定值
wow flipInY	原位置左右旋动、透明度从100%变化至设定值
wow bounce	上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake	左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU	原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

fullpage.js和wow.js

有的网站采用全屏滚动的fullpage插件与wow相结合的方法，实现的效果比较酷炫。我们完全可以仿写。

但是使用fullpage.js下wow.js无效失效没动作

问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下
　　$(‘#fullpage‘).fullpage({
　　　　scrollBar:true；
　　});
最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下
　　html{

　　　　overflow:hidden;

　　}

 原文摘自：https://www.cnblogs.com/linjiu0505/p/10605543.html

 原文摘自：http://www.mamicode.com/info-detail-2286884.html