解决视口动画插件jquery.aniview.js使用animate.css时无效的问题(最新版本网页视口动画插件的使用及没作用、没反应)

当网站页面元素进入视口时自动应用过渡效果。CSS过渡效果可以为网页添加动画效果,并提供了一种平滑的转换方式,使元素的变化更加流畅和生动。而通过jQuery插件来获取页面滚动位置决定合适调用动画效果。

一、官网

  • animate.css官网
    一款强大的预设css3动画库,也是实现视口动画功能的核心,各种动作名称都从此链接内找。
    以下为部分动画对应的中文。
javascript 复制代码
fade: {
  title: '淡入淡出',
  fadeIn: '淡入',
  fadeInDown: '向下淡入',
  fadeInDownBig: '向下快速淡入',
  fadeInLeft: '向右淡入',
  fadeInLeftBig: '向右快速淡入',
  fadeInRight: '向左淡入',
  fadeInRightBig: '向左快速淡入',
  fadeInUp: '向上淡入',
  fadeInUpBig: '向上快速淡入',
  fadeOut: '淡出',
  fadeOutDown: '向下淡出',
  fadeOutDownBig: '向下快速淡出',
  fadeOutLeft: '向左淡出',
  fadeOutLeftBig: '向左快速淡出',
  adeOutRight: '向右淡出',
  fadeOutRightBig: '向右快速淡出',
  fadeOutUp: '向上淡出',
  fadeOutUpBig: '向上快速淡出'
},
bounce: {
  title: '弹跳类',
  bounceIn: '弹跳进入',
  bounceInDown: '向下弹跳进入',
  bounceInLeft: '向右弹跳进入',
  bounceInRight: '向左弹跳进入',
  bounceInUp: '向上弹跳进入',
  bounceOut: '弹跳退出',
  bounceOutDown: '向下弹跳退出',
  bounceOutLeft: '向左弹跳退出',
  bounceOutRight: '向右弹跳退出',
  bounceOutUp: '向上弹跳退出'
},
zoom: {
  title: '缩放类',
  zoomIn: '放大进入',
  zoomInDown: '向下放大进入',
  zoomInLeft: '向右放大进入',
  zoomInRight: '向左放大进入',
  zoomInUp: '向上放大进入',
  zoomOut: '缩小退出',
  zoomOutDown: '向下缩小退出',
  zoomOutLeft: '向左缩小退出',
  zoomOutRight: '向右缩小退出',
  zoomOutUp: '向上缩小退出'
},
rotate: {
  title: '旋转类',
  rotateIn: '顺时针旋转进入',
  rotateInDownLeft: '从左往下旋入',
  rotateInDownRight: '从右往下旋入',
  rotateInUpLeft: '从左往上旋入',
  rotateInUpRight: '从右往上旋入',
  rotateOut: '顺时针旋转退出',
  rotateOutDownLeft: '向左下旋出',
  rotateOutDownRight: '向右下旋出',
  rotateOutUpLeft: '向左上旋出',
  rotateOutUpRight: '向右上旋出'
},
flip: {
  title: '翻转类',
  flipInX: '水平翻转进入',
  flipInY: '垂直翻转进入',
  flipOutX: '水平翻转退出',
  flipOutY: '垂直翻转退出'
},
strong: {
  title: '强调类',
  bounce: '弹跳',
  flash: '闪烁',
  pulse: '脉冲',
  rubberBand: '橡皮筋',
  shake: '左右弱晃动',
  swing: '上下摆动',
  tada: '缩放摆动',
  wobble: '左右强晃动',
  jello: '拉伸抖动'
}
  • jquery.aniview.js官网
    实现页面滚动元素进入视口发生动画的插件,该插件使用基于animate.cssjQueryjQuery的版本不限。
Option Type Description Default
animateClass string the animate.css class to use: 'animated' enables v3.x support and 'animate__animated' to enable v4.x support animated
animateThreshold(阈值) int +ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view. 0
scrollPollInterval int The frequency at which user scrolling is 'polled' i.e. tested. This is in milliseconds (ms) and is an extension to jQuery's in-built 'scroll' event/handler. 20

animateClass :这个的用法需要考虑自己引得是 v3版本的animate.css 还是v4版本的
animateThreshold :简单的的说,值是正的,就当元素进入视口后再触发;值是负的,就当元素进入视口前触发。

注:

当用户加载页面时,任何已经在视口中的元素都将立即触发它的动画(如果已设置)。

换句话说,在这些元素上启动动画之前,它不会等待用户开始滚动。

二、不同版本的使用

版本V3

html 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="resource/js/jquery-3.7.1.min.js"></script>
<link href="resource/css/animate/v3/animate.min.3.5.0.css" rel="stylesheet">
<script type="text/javascript" src="resource/js/aniview/v3/jquery.aniview.js"></script>
</head>
<body>
<div class="aniview" av-animation="fadeInRight">v3</div>
</body>
<script type="text/javascript">
var options = {
    animateThreshold: 100,
    scrollPollInterval: 20
}
jQuery('.aniview').AniView(options);
</script>
</html>

版本V4

html 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="resource/js/jquery-3.7.1.min.js"></script>
<link href="resource/css/animate/v4/animate.min.4.1.1.css" rel="stylesheet">
<script type="text/javascript" src="resource/js/aniview/v4/jquery.aniview.js"></script>
</head>
<body>
<div class="aniview animate__animated animate__fadeInRight">v4</div>
</body>
<script type="text/javascript">
var options = {
    animateThreshold: 100,
    scrollPollInterval: 20
}
jQuery('.aniview').AniView(options);
</script>
</html>

三、问题

  1. 换V4以后无效,首先注意排除代码是否正确书写。

V3动作在属性av-animation里写,V4则写在class里,且增加了animate__animated等变化。

  1. 自打版本V3.6.2及以后,动画是否显示归系统管理,设置参考下图:
  2. 所以为了"避免"用户看不到动画,还是用老版本吧,现在官方能下载到最新的防屏蔽版本是V3.5.1,都在下面的包里。
    视口动画插件版本合集(包括jQuery、jquery.aniview.js、animate.css)

参考:
视口动画Animate.css和 jquery-aniview详细使用
jquery插件页面滚动元素进入视口触发动画jquery-aniview
【踩坑笔记】animate.css无效【非版本问题】
Vue------关于 Vue 引用 animate.css 动画 不起作用的问题(animate.css)

相关推荐
软件技术NINI8 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
知识分享小能手22 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
苏打水com39 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
一枚前端小能手1 小时前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
tianchang1 小时前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
~无忧花开~1 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
JNU freshman2 小时前
vue 技巧与易错
前端·javascript·vue.js
Asort2 小时前
JavaScript设计模式(十六)——迭代器模式:优雅遍历数据的艺术
前端·javascript·设计模式
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 28 - shallowRef、shallowReactive
前端·javascript·vue.js
开源之眼2 小时前
深入理解 JavaScript 报错:TypeError: undefined is not a function
前端·javascript