Detailed explanation of aniAuto usage

Front-end development often uses various plug-ins. Today I will introduce the next plug-in, aniAuto, which is easy to understand and quick to use.

Download link: https://github.com/justinzzc/aniAuto

At the end of the article, I will explain the usage again in combination with the example demo I have made. I will summarize other cases in the next article aniAuto example demo .

【Introduction to aniAuto】

Official explanation: aniAuto jquery plugin based on animate.css (translated as aniAuto is a jquery plugin based on animate.css)

The usage is very simple, just add some tag attributes and a line of js script to combine complex animation effects

【Introduction】

After downloading, first import css

<link rel="stylesheet" type="text/css" href="css/animate.css">

Because aniAuto is a plug-in developed based on jQuery, the jQuery library needs to be introduced before the script is introduced.

<script src="js/jquery-1.12.3.min.js"></script>

Finally, the script file aniAuto.min.js is introduced

<script src="js/aniAuto.min.js"></script>

【usage】

Mainly divided into two parts: syntax, trigger animation after loading the page

(1) Grammar

In the document, configure the class class ani-auto for the dom node that needs to be configured for automatic animation.

Like animate, aniAuto also has configuration items such as duration, delay, and number of iterations.

Available configuration items:

①Initial hide (attribute) ani-init-hide

②Delay (attribute) ani-delay

③Duration (attribute) ani-duration

④重复次数 (attribute) ani-iteration

⑤触发元素 (attribute) ani-trigger

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

下面来依次介绍下：

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

<div class="ani-auto  tada" ani-init-hide>
刚开始hide
</div>

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

②延迟 (attribute) ani-delay

<div class="ani-auto  tada" ani-delay="1s">
            我有1秒的delay
</div>

③持续时长 (attribute) ani-duration

<div class="ani-auto  tada" ani-duration="3s">
      我的duration时长是3秒
</div>

④重复次数 (attribute) ani-iteration

<div class="ani-auto  wobble" ani-iteration="infinite">我将重复infinite无数次</div>

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

<div id="item_1" class="ani-auto  tada" >我第一个触发</div>
<div id="item_3" class="ani-auto  tada" ani-trigger="#item_2">我第三个触发</div>
<div id="item_2" class="ani-auto  flipInX" ani-trigger="#item_1">我第二个触发</div>

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

<div class=" ani-auto  zoomIn"  ani-scroll ani-scroll-offset="-2%">
      <p>trigger scroll offset 自动滚动</p>
</div>

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，所以文档里可以这样写

<script>
    $(document).ready(function () {
        $.aniAuto();
    });
</script>

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

【实例讲解】

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

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

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

②注意：ani-iteration="infinite"迭代次数无限时，触发元素ani-trigger即触发时序失效（因为上一个无限的话就没有停止的一刻，也就轮不上下一个）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详解demo</title>
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/aniAuto.min.js"></script>
    <style type="text/css">
        .title {
            text-align: center;
        }
        .demos {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }
        .demo {
            padding: 30px;
            margin: 20px 0;
        }
        .item {
            display: inline-block;
            width: 200px;
            height: 200px;
            background: deepskyblue;
            margin-right: 30px;
            margin-bottom: 30px;
            text-align: center;
            color: white;
            line-height: 200px;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!--tada放大抖动，flipInX沿X轴旋转,rotateIn旋转淡入，swing摇摆，bounceIn弹性进入-->
<!--注意：ani-iteration="infinite"迭代次数无限时，触发元素ani-trigger即触发时序失效（因为上一个无限的话就没有停止的一刻，
也就轮不上下一个）-->
<div class="demos">
    <div class="slideInUp animated">
        <h1 class="title ">aniAuto详解</h1>
        <div class="demo  "
             style="margin-top: 10px;margin-bottom: 0px;">
            <div id="item_8"
                 class="item ani-auto zoomIn"
                 ani-scroll
                 ani-scroll-offset="-20"
                 ani-trigger="#item_7">
                <p>自动滚动2</p>
            </div>
        </div>
        <div id="item_1" class="ani-auto item tada" ani-delay="3s">
            delay延迟
        </div>
        <div id="item_2" class="ani-auto item flipInX" ani-trigger="#item_1">
            无限时，之后失效
        </div>
        <div id="item_3" class="ani-auto item rotateIn" ani-duration="2s" ani-trigger="#item_2">
            duration触发时长
        </div>
        <div id="item_4" class="ani-auto item swing" ani-delay="1s" ani-trigger="#item_3">
            delay延迟1秒
        </div>
        <div id="item_5" class="ani-auto item bounceIn" ani-init-hide ani-trigger="#item_4">
            hide初始隐藏
        </div>
        <div id="item_6" class="ani-auto item wobble" ani-iteration="3" ani-trigger="#item_5">
            iteration迭代次数
        </div>
        <div class="demo  "
             style="margin-top: 100px;margin-bottom: 400px;">
            <div id="item_7"
                 class="item ani-auto zoomIn"
                 ani-scroll
                 ani-scroll-offset="-20"
                 ani-trigger="#item_6">
                <p>自动滚动1</p>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $.aniAuto();
    });
</script>
</body>
</html>

Detailed explanation of aniAuto usage

Guess you like