riot-animation-context riot tag (animation-context)

Riot JS Tag animation context for dealing with css transitions and animated addition and removal of riot tags or just dynamically ineracting with css animations

Demonstration

riot-animation-context

Includes animate.css for base animations, these can be overridden or added to in external css.

Why not just use animate.css

You can still use animate.css. This tag helps when dynamically mounting riotjs tags and causing some animation effects to occur. Because the animation can be controlled through opts, the effects themselves can be dynamically changed and played.

The other benefit is that it handles animation on unmount of riot tags nicely.

Getting Started

1. Installation

npm install riot-animation-context

2. Examples

   
   require('riot-animation-context')
   

the following animation-context when mounted will immediately rubberBand, then wait 2000ms and lightSpeedOut note that inner scope belongs to animation-context so to call methods and interact with opts and properties of the outer tag the parent property is required. Because animate-on-mount is true, the animate-out will also cause the animation-context to unmount once it is finished.

<my-riot-tag>
    <!-- animate anything inside the animation context -->
    <animation-context name="animator"
        animate-on-mount="true" 
        animate-infinitely="true" 
        animate-in="rubberBand" 
        animate-auto-out-delay="2000"
        animate-out="lightSpeedOut"
        >
        <button onclick={ parent.becomeAwesome }>CLICK ME TO <em>BECOME AWESOME</em></button>
    </animation-context>

    <script>
        // By assigning a name to the animation context you can use it 
        // as in the following code sample:-
        // this.animator.in()
        // this.animator.out()
        // in() and out() font need to be manually called because we have 
        // supplied the animate-on-mount="true" attribute
        
        this.becomeAwesome = function() {
            alert('impossible!')
        }
    </script>
</my-riot-tag>

<script>
    riot.mount('my-riot-tag');
</script>

3. Riot Tag

animation-context Tag Attributes

• animate-in="{{class}}" eg. "lightSpeedIn", "fadeIn" The css animation to play when the tag's in() method is called

    <animation-context animate-in="rotateIn">...</animation-context>

• animate-infinitely="{{true|false}}" eg. "true", "false" Play the animate-in animation infinitely when it is called

    <animation-context animate-infinitely="true">...</animation-context>

• animate-out="{{class}}" eg. "lightSpeedOut", "rotateOut" The css animation to play when the tag's out() method is called

    <animation-context animate-out="fadeOut">...</animation-context>

• animate-on-mount="{{true|false}}" eg. "true", "false" Start the animate-in animation as soon as the tag is mounted

    <animation-context animate-on-mount="false">...</animation-context>

• animate-auto-in-delay="{{milliseconds}}" eg. "0", "1000" Wait x number of milliseconds before animate-in when animate-on-mount is true

    <animation-context animate-auto-in-delay="500">...</animation-context>

• animate-auto-out-delay="{{milliseconds}}" eg. "0", "1000" Wait x number of milliseconds after animate-in has finished to start playing animate-out

    <animation-context animate-auto-out-delay="2000" animate-out="hinge">...</animation-context>

Copyright and license

Copyright (c) 2015 Anycode [email protected]

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.