sartaj/riot-animate

Animate Riot 2

riot-animate - Animate Riot 2

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>

<script type="riot/tag">

<timer>
  // This is using a ngAnimate style 'enter' 'leave' css class
  <div class="card card-fade" animate="fade" animate-duration="300ms" animate-delay="1000ms">
    <p class="">Using ngAnimate style classes</p>
  </div>

  // This is using an animate.css
  <div class="card" each="{item, i in items}" animate="zoomIn" animate-leave="zoomOut" animate-duration="300ms" animate-delay="{i*20}ms">
    <p class="">Using animate.css</p>
  </div>

  this.items = opts.items;

  setTimeout(function(){
      // Special unmount function
    this.animatedUnmount();
  }.bind(this),3000);

  // This is how you add animation capabilities
  this.mixin(riotAnimate);

</timer>
</script>

<script>
    var items = [];
    for(var x=0;x<100;x++) {
      items.push({time: 'time'})
    }
    riot.mount('timer', {items: items});
</script>

Contributing

Not everything has been tested in extent yet. Please feel free to fork or submit an issue.

riot-animate's Issues

Doesn't remove tag if In and Out transitions is Fade.

Hello,

Thanks for mixin. I notice some bug with transitions.
When:

animate="fadeIn" animate-leave="fadeOut"

Items are hidden in the end, but not removed from DOM. It's happening on your basic demo.

animate single elements out

Hi,
This is really cool. I love the angular method of animating elements into the DOM, and your implementation here is great.
But, i'm managing to get the elements to animate in, yet i can't figure out how to animate the elements out. I'm trying to get single elements to remove from DOM on click, and can't figure out the method (I could only manage to animate-out all elements from the dom, but not single ones)
My progress is in this codepen: codepen.io/rhmubus/pen/pRPLwO
Thank you!

"animate-enter" not really working..?

It seems like animation won't run when i use animate-enter attribute. Something like this

  <div class="card card-fade" animate-enter="fade" animate-duration="300ms" animate-delay="1000ms">
    <p class="">Using ngAnimate style classes</p>
  </div>

Here is the example,

https://jsfiddle.net/5711sapx/