aniAuto用法详解

来源:转载

前端开发经常会用到各种插件,今天我来介绍下一款简单易懂,上手快的插件aniAuto

下载链接:https://github.com/justinzzc/aniAuto

文章最后,我会结合做的实例demo再次讲解下用法,其他案例我在下篇文章aniAuto实例demo里做了总结

【aniAuto简介】

官方解释:aniAuto jquery plugin based on animate.css(译为aniAuto是基于animate.css的jquery插件)

用法十分简单,只需添加一些标签属性和一行js脚本就可以组合出复杂的动画效果

【引入】

下载好之后,先引入css

因为aniAuto是基于jQuery开发的插件,所以接下来在引入脚本前,需要先引入jQuery库

最后引入脚本文件aniAuto.min.js

 

【用法】

主要分两部分:语法,加载完页面后触发动画

(1)语法

在文档里将需要配置自动动画的dom节点配置class类 ani-auto

同animate一样,aniAuto也有持续时长,延迟,迭代次数等配置项

可用配置项:

①初始隐藏 (attribute) ani-init-hide

②延迟 (attribute) ani-delay

③持续时长 (attribute) ani-duration

④重复次数 (attribute) ani-iteration

⑤触发元素 (attribute) ani-trigger

⑥自动滚动 (attribute) ani-scroll ani-scroll-offset

下面来依次介绍下:

①初始隐藏 (attribute) ani-init-hide

刚开始hide

添加ani-init-hide 属性后初始会隐藏,动画开始的时候出现

②延迟 (attribute) ani-delay

我有1秒的delay

③持续时长 (attribute) ani-duration

我的duration时长是3秒

④重复次数 (attribute) ani-iteration

我将重复infinite无数次

⑤触发元素 (attribute) ani-trigger,也可以理解成是触发时序

我第一个触发
我第三个触发
我第二个触发

⑥自动滚动 (attribute) ani-scroll ani-scroll-offset

trigger scroll offset 自动滚动

ani-scroll-offset 值:数值,如:-100 ==> 100px;百分比,如:-2% ==> -2% * $('body').height()

(2)加载完页面后触发动画

在aniAuto文件里有

 /** * @param dom parentDom 范围容器节点 */ $.aniAuto = function (dom, options) { var autoAniItems = $('.ani-auto', dom && $(dom)); $.each(autoAniItems, function (index, item) { autoAni(item, options); }); }

因为所有的动画效果都封装在了函数$.aniAuto里,所以页面加载完成后要调用函数$.aniAuto,所以文档里可以这样写

这样在页面加载完成后即可触发动画

【实例讲解】

接下来通过实例demo讲解下aniAuto用法:

首先说下实例中的知识点:

①效果:tada放大抖动,flipInX沿X轴旋转,rotateIn旋转淡入,swing摇摆,bounceIn弹性进入

yabo亚博真人娱乐②注意:ani-iteration="infinite"迭代次数无限时,触发元素ani-trigger即触发时序失效(因为上一个无限的话就没有停止的一刻,也就轮不上下一个)

  详解demo    

aniAuto详解

自动滚动2

delay延迟
无限时,之后失效
duration触发时长
delay延迟1秒
hide初始隐藏
iteration迭代次数

自动滚动1

.

分享给朋友:
您可能感兴趣的文章:
随机阅读: