一、问题答疑：

1. animate.css 如何在vue项目中引入？或引用？
2. 如何监听滚动事件，触发animate.class动画播放？

---

vue 监听滚轮滚动事件，for循环 ，动态id，代码提示：

• 参考博客：点击查看“简书”文章

---

vue文档：地址

---

二、详细教程：

1、安装animate.min.css插件 （如下图）

• 首先，安装 animate.css
  

2、引入animate.css

• 然后，在main.js文件中，引入animate.css， 代码如下：

  	// npm install animate.css --save安装，在引入
  	import animated from 'animate.css' 
  	Vue.use(animated);
  

  

---

3、代码调用：

mounted(){

      // 动画
      window.addEventListener('scroll', this.handleScroll, true);

},
methods: {
	// 滚动监听 · 动画播放
      handleScroll: function(){ 
      /* 
        let clientHeight = document.documentElement.clientHeight || document.body.clientHeight; 
        // 设备/屏幕高度
        let scrollObj = document.getElementById('animate_1'); // 滚动区域
        let scrollTop = $(scrollObj).offset().top; // animate_1 到头部的距离
      */
        let scrollHeight = $(window).scrollTop(); // 滚动条的滚动行程
        //滚动条滚动到对应的板块显示
        console.log("重要参考："+scrollHeight);
        //导航栏背景色
        // if(scrollHeight < 70){
        //   $("#menubgfff").css('background','none');
        // }
        // if(scrollHeight > 70){
        //   $("#menubgfff").css('background','#FFF');
        // }
        //动画播放设置
        if(scrollHeight > 45){
          $("#animate_1").addClass('animated bounceInDown');
          this.showAnimate_1 = true;
        }
        if(scrollHeight > 552){
          $(".animate_2").addClass('animated bounceInDown');
          this.showAnimate_2 = true;
        }
        if(scrollHeight > 1186){
          $(".animate_3").addClass('animated bounceInLeft');
          $(".animate_4").addClass('animated bounceInRight');
          this.showAnimate_3 = true;
        }


      },
}

• 注意：对比上述代码块中的注释部分代码。

---

animate.min.css动画类名大全：

• 博客参考： 点击查看博客
• 官网参考： demo演示地址

三、效果图省略

• 参考项目：新首页的“企业入口”+“HR入口” 等动画部分【结合js部分：鼠标滚动监听代码】。

1. 从顶部跌落，带弹簧效果；
2. 从两边滑入，带弹簧效果；

---

以上就是关于“ vue 监听页面滚动事件：触发animate.min.css动画特效 ” 的全部内容。