This riot mixin is inspired by ngAnimate, and provides an animation system for mounts and unmounts.
You can have an animation CSS class and use an ngAnimate style system, linking animations to riot-enter, riot-enter-active, riot-leave, and riot-leave-active.
To have animations on unmount, you must this.animateUnmount(). This allows for a 'leave' animation to occur before unmounting, i.e. removing DOM elements from the file.
In addition, you can easily use animate.css and use the attributes animate, animate-enter, and animate-leave, along with adding animate-delay and animate-duration.
Example
.fade.riot-animate{
transition:0.5s linear all;
}
.fade.riot-enter,
.fade.riot-leave.riot-leave-active{
opacity:0;
}
.fade.riot-enter.riot-enter-active ,
.fade.riot-leave{
opacity:1;
}
<timer></timer>
<scripttype="riot/tag">
<timer>
// This is using a ngAnimate style 'enter' 'leave' css class