一、问题答疑：
1. animate.css 如何在vue项目中引入？或引用？ 2. 如何监听滚动事件，触发animate.class动画播放？
vue 监听滚轮滚动事件，for循环 ，动态id，代码提示：
参考博客：点击查看“简书”文章
vue文档：地址
二、详细教程：
1、安装animate.min.css插件 （如下图）
首先，安装 animate.css2、引入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动画特效 ” 的全部内容。
如果觉得《vue 监听页面滚动事件：触发animate.min.css动画特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
