jsdoc/doc/module-animate.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Module: animate</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Module: animate</h1>

    
<section>

<header>
    
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description"><p>Handles all the animation process</p></div>
        

<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line1">line 1</a>
    </li></ul></dd>
    

</dl>


    </div>

    
        <h3 class="subsection-title">Members</h3>

        
<h4 class="name" id=".removeCustomCssProperties"><span class="type-signature">(static, constant) </span>removeCustomCssProperties<span class="type-signature"></span></h4>


<div class="description">
    <p>Removes the CSS properties customized by the user</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line165">line 165</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id=".setCssProperty"><span class="type-signature">(static, constant) </span>setCssProperty<span class="type-signature"></span></h4>


<div class="description">
    <p>Sets an inline CSS property</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line203">line 203</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><a href="module-globals.html#.PROPERTY_NAMES"><code>module:globals.PROPERTY_NAMES</code></a></li>
        </ul>
    </dd>
    

</dl>


<h4 class="name" id="~CALLBACK_TRACKER"><span class="type-signature">(inner, constant) </span>CALLBACK_TRACKER<span class="type-signature"> :Object</span></h4>


<div class="description">
    <p>Keeps track of the callbacks being executed, preventing the callbacks to be executed
multiple times if multiple elements are being animated by a single trigger.</p>
<p>When an element triggers an animation, no matter how many elements are being animated,
the start() and complete() callbacks should each be executed only once.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Object</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line101">line 101</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="~CONFIG"><span class="type-signature">(inner, constant) </span>CONFIG<span class="type-signature"> :Object.&lt;string, any></span></h4>


<div class="description">
    <p>Object that handles configurations, either customized by the user
or default values defined in 'configurations.default' object</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Object.&lt;string, any></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line84">line 84</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><code>configurations</code></li>
        </ul>
    </dd>
    

</dl>


<h4 class="name" id="~DURATION_REGEX"><span class="type-signature">(inner, constant) </span>DURATION_REGEX<span class="type-signature"></span></h4>


<div class="description">
    <p>Matches duration or delay CSS properties values</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line87">line 87</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="~LISTENERS"><span class="type-signature">(inner, constant) </span>LISTENERS<span class="type-signature"></span></h4>


<div class="description">
    <p>Keeps track of the EventListeners associated to a trigger selector</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line159">line 159</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="~TARGETS_STACK"><span class="type-signature">(inner, constant) </span>TARGETS_STACK<span class="type-signature"> :Object</span></h4>


<div class="description">
    <p>Keeps track of all the targets being animated to ensure that the callback tracker
will be removed only when all the targets have been animated. Also ensures that
all targets will be re-enabled only when all targets have already been animated.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Object</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line125">line 125</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="~configHandler"><span class="type-signature">(inner, constant) </span>configHandler<span class="type-signature"></span></h4>


<div class="description">
    <p>ProxyHandler passed to the 'CONFIG' object to ensure that
if an option is not customized by the user, the default value set
in 'configurations.default' will be returned instead.</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line58">line 58</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><code>CONFIG</code></li>
        
            <li><code>configurations</code></li>
        </ul>
    </dd>
    

</dl>


<h4 class="name" id="~configurations"><span class="type-signature">(inner, constant) </span>configurations<span class="type-signature"> :Object.&lt;string, any></span></h4>


<div class="description">
    <p>Contains the default value for each custom option.
Those values can be overwritten by the user by calling jsCssAnimations.config()
and passing new default values for all the animations.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Object.&lt;string, any></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line33">line 33</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="~trigger"><span class="type-signature">(inner) </span>trigger<span class="type-signature"></span></h4>


<div class="description">
    <p>bubbles up untill the attribute is found</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line250">line 250</a>
    </li></ul></dd>
    

</dl>


        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="~animate"><span class="type-signature">(inner) </span>animate<span class="signature">(element, action, id, opts)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Handles all the animation process</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element to animate</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>action</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>'show', 'hide', or 'move'</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>ID of an animation in the *_ANIMS_ID objects</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opts</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object.&lt;string, any></span>


            </td>

            
            <td class="description last"><p>All the options passed by the user</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line422">line 422</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><a href="module-globals.html#.VISIBILITY_ANIMS_ID"><code>module:globals.VISIBILITY_ANIMS_ID</code></a></li>
        
            <li><a href="module-globals.html#.MOTION_ANIMS_ID"><code>module:globals.MOTION_ANIMS_ID</code></a></li>
        </ul>
    </dd>
    

</dl>


    <h4 class="name" id="~disable"><span class="type-signature">(inner) </span>disable<span class="signature">(element)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Sets an attribute to indicate that the element is currently being animated
and so can not perform any other animations</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line314">line 314</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~enable"><span class="type-signature">(inner) </span>enable<span class="signature">(element)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Removes the attribute that indicates that an element is currently being animated</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line322">line 322</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~end"><span class="type-signature">(inner) </span>end<span class="signature">(triggerSelector, eventType)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Removes the event listener of all elements represented by the <code>triggerSelector</code></p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Default</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>triggerSelector</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>
|

<span class="param-type">null</span>


            </td>

            
                <td class="default">
                
                    null
                
                </td>
            

            <td class="description last"><p>A valid CSS selector for the trigger Element. If ommited, '.${CLASS_NAMES.trigger}' will be used instead.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>eventType</code></td>
            

            <td class="type">
            
                
<span class="param-type">String</span>


            </td>

            
                <td class="default">
                
                    click
                
                </td>
            

            <td class="description last"><p>The event name. If ommited, 'click' is the default value.</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line658">line 658</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~endVisibilityToggle"><span class="type-signature">(inner) </span>endVisibilityToggle<span class="signature">(element, opts)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Adds the hidden or collapsed class, when necessary.
Finalize parent element's resize operations, if needed.</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opts</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"><p>All the necessary options</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line377">line 377</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~eventHandler"><span class="type-signature">(inner) </span>eventHandler<span class="signature">(el, animationId, opts)</span><span class="type-signature"> &rarr; {EventListener}</span></h4>
    

<div class="description">
    <p>Generates the handler function to be passed to the event listener</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>el</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>animationId</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The ID of the animation in the *_ANIMS_ID</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opts</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"><p>The options passed by the user</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line587">line 587</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><a href="module-globals.html#.VISIBILITY_ANIMS_ID"><code>module:globals.VISIBILITY_ANIMS_ID</code></a></li>
        
            <li><a href="module-globals.html#.MOTION_ANIMS_ID"><code>module:globals.MOTION_ANIMS_ID</code></a></li>
        </ul>
    </dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>A function to be passed to the addEventListener() as a handler</p>
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">EventListener</span>


    </dd>
</dl>

    
    <h4 class="name" id="~getAction"><span class="type-signature">(inner) </span>getAction<span class="signature">(element, animType)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Checks which animation CSS class is set to determine wich action to perform next</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>animType</code></td>
            

            <td class="type">
            
                
<span class="param-type">*</span>


            </td>

            
            <td class="description last"><p>Either 'motion' or 'visibility'</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line536">line 536</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>'show' or 'hide' or 'move' or 'moveBack'</p>
</div>


    <h4 class="name" id="~getTargetSelector"><span class="type-signature">(inner) </span>getTargetSelector<span class="signature">(eventTarget)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Searches and returns the 'target-selector' attribute</p>
<p>If the element which triggered the event doesn't have the attribute,
will bubbles up untill the attribute is found.
If no attribute is found, an empty string is returned and so
no element will be selected to be animated</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>eventTarget</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element wich triggers the event</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line245">line 245</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>The CSS selector for the animation target(s) or an empty string</p>
</div>


    <h4 class="name" id="~getTimeInMs"><span class="type-signature">(inner) </span>getTimeInMs<span class="signature">(value)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Removes the unit from the duration or delay and returns the value in milliseconds</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>duration or delay CSS property value</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line263">line 263</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>The duration or delay in milliseconds</p>
</div>


    <h4 class="name" id="~getTotalAnimTime"><span class="type-signature">(inner) </span>getTotalAnimTime<span class="signature">(element)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Returns an object with the duration and delay time in milliseconds</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line275">line 275</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>Both the duration and delay, in milliseconds</p>
</div>


    <h4 class="name" id="~handleVisibilityToggle"><span class="type-signature">(inner) </span>handleVisibilityToggle<span class="signature">(element, args)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Sets the parent element dimensions, if needed.</p>
<p>Removes the collapsed or hidden class from the element, when necessary</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>args</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"><p>All the necessary arguments</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line362">line 362</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~hasIterationProp"><span class="type-signature">(inner) </span>hasIterationProp<span class="signature">(element)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Verifies if an element has defined an iteration CSS property</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line339">line 339</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>True if the element has an iteration CSS property set, False otherwise</p>
</div>


    <h4 class="name" id="~init"><span class="type-signature">(inner) </span>init<span class="signature">(trigger)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Initiates the tracker</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>trigger</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>A CSS selector representing the element which triggered the animation</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line107">line 107</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~init"><span class="type-signature">(inner) </span>init<span class="signature">(animationId, opts)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Initiate the event listener with the animation</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>animationId</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The ID of the animation in *_ANIMS_ID object</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opts</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"><p>All options passed by the user</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line618">line 618</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><a href="module-globals.html#.VISIBILITY_ANIMS_ID"><code>module:globals.VISIBILITY_ANIMS_ID</code></a></li>
        
            <li><a href="module-globals.html#.MOTION_ANIMS_ID"><code>module:globals.MOTION_ANIMS_ID</code></a></li>
        </ul>
    </dd>
    

</dl>


    <h4 class="name" id="~initCallback"><span class="type-signature">(inner) </span>initCallback<span class="signature">(trigger, fn, type)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Executes a given callback, checking, when necessary, if the callback was already
executed by another element being animated by the same trigger button</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>trigger</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>The CSS selector of the element that triggered the animation</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>fn</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            </td>

            
            <td class="description last"><p>The callback to execute</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>Either 'start' or 'complete'</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line396">line 396</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~isEnabled"><span class="type-signature">(inner) </span>isEnabled<span class="signature">(element)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Verifies if an element is already being animated or not</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element to check</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line331">line 331</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>True if the element is not currently being animated</p>
</div>


    <h4 class="name" id="~isMotion"><span class="type-signature">(inner) </span>isMotion<span class="signature">(animType)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Returns true if the animation type is 'motion'</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>animType</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>Either 'motion' or 'visibility'</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line296">line 296</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>True if animation type is 'motion'. False otherwise.</p>
</div>


    <h4 class="name" id="~isVisibility"><span class="type-signature">(inner) </span>isVisibility<span class="signature">(animType)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Returns true if the animation type is 'visibility'</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>animType</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>Either 'motion' or 'visibility'</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line290">line 290</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>True if animation type is 'visibility'. False otherwise.</p>
</div>


    <h4 class="name" id="~preset"><span class="type-signature">(inner) </span>preset<span class="signature">(el, args)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Sets the CSS properties customized by the user,
prior to the begining of the animation</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>el</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>args</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"><p>The animation's ID and type and all the options passed by the user</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line557">line 557</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~remove"><span class="type-signature">(inner) </span>remove<span class="signature">(trigger)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Removes 'trigger' from the tracker</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>trigger</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
            <td class="description last"><p>A CSS selector representing the element which triggered the animation</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line114">line 114</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~removeMotionCssClass"><span class="type-signature">(inner) </span>removeMotionCssClass<span class="signature">(element)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Removes the current motion animation CSS class from the element</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element being animated</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line302">line 302</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~resetDefaultConfig"><span class="type-signature">(inner) </span>resetDefaultConfig<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Reset the configurations to its default values
by removing from 'CONFIG' all options customized by the user</p>
</div>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line190">line 190</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><code>CONFIG</code></li>
        </ul>
    </dd>
    

</dl>


    <h4 class="name" id="~updateCssProperties"><span class="type-signature">(inner) </span>updateCssProperties<span class="signature">(element, opts)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Sets the CSS properties customized by the user in the animation function's options</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>element</code></td>
            

            <td class="type">
            
                
<span class="param-type">HTMLElement</span>


            </td>

            
            <td class="description last"><p>The DOM element to update the CSS Properties</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opts</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object.&lt;string, string></span>


            </td>

            
            <td class="description last"><p>Object containing a custom property key and a CSS value to be updated</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line212">line 212</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="~updateDefaultConfig"><span class="type-signature">(inner) </span>updateDefaultConfig<span class="signature">(opts)</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Customize the default animations configurations by overwriting
the 'CONFIG' values</p>
</div>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>opts</code></td>
            

            <td class="type">
            
                
<span class="param-type">Object</span>


            </td>

            
            <td class="description last"><p>All the options customized by the user</p></td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="animate.js.html">animate.js</a>, <a href="animate.js.html#line177">line 177</a>
    </li></ul></dd>
    

    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><code>CONFIG</code></li>
        </ul>
    </dd>
    

</dl>


</article>

</section>


</div>

<nav>
    <h2><a href="index.html">JS-CSS Animations</a></h2><h3>Modules</h3><ul><li><a href="module-animate.html">animate</a></li><li><a href="module-globals.html">globals</a></li><li><a href="module-js-css-animations.html">js-css-animations</a></li><li><a href="module-measurements.html">measurements</a></li><li><a href="module-resize-parent.html">resize-parent</a></li><li><a href="module-transitions.html">transitions</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Wed Dec 07 2022 15:22:18 GMT-0300 (Horário Padrão de Brasília)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>