一、问题答疑:

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动画特效 ” 的全部内容。

返回
顶部