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
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
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.
<!-- animate anything inside the animation context -->CLICK ME TO BECOME AWESOME
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
...
- animate-infinitely="{{true|false}}" eg. "true", "false"
Play the
animate-in
animation infinitely when it is called
...
- animate-out="{{class}}" eg. "lightSpeedOut", "rotateOut"
The css animation to play when the tag's
out()
method is called
...
- animate-on-mount="{{true|false}}" eg. "true", "false"
Start the
animate-in
animation as soon as the tag is mounted
...
- animate-auto-in-delay="{{milliseconds}}" eg. "0", "1000"
Wait x number of milliseconds before
animate-in
whenanimate-on-mount
is true
...
- animate-auto-out-delay="{{milliseconds}}" eg. "0", "1000"
Wait x number of milliseconds after
animate-in
has finished to start playinganimate-out
...
Copyright and license
Copyright (c) 2015 Anycode lee@anycode.io
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.