riot animate

by exe1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/riot/2.5.0/riot+compiler.min.js"></script>
<script src="https://rawgit.com/sartaj/riot-animate/master/riotAnimate.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/daneden/animate.css/master/animate.min.css">
<timer></timer>

<script type="riot/tag">

<timer>

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

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

  <div class="card" each="{item, i in items}" animate="fadeInDown" animate-leave="zoomOut" animate-duration="300ms" animate-delay="{i*200}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<18;x++) {
      items.push({time: 'time'})
    }
    riot.mount('timer', {items: items});
</script>

CSS

html,body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
}

.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;
}