https://github.com/sartaj/riot-animate

Animate Riot 2
https://github.com/sartaj/riot-animate

animation riot riotjs

Last synced: 6 days ago
JSON representation

Animate Riot 2

• Host: GitHub
• URL: https://github.com/sartaj/riot-animate
• Owner: sartaj
• License: mit
• Created: 2015-08-05T02:05:47.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-24T10:24:01.000Z (almost 8 years ago)
• Last Synced: 2024-09-23T05:47:15.551Z (about 2 months ago)
• Topics: animation, riot, riotjs
• Language: JavaScript
• Homepage: http://sartaj.github.io/riot-animate
• Size: 656 KB
• Stars: 61
• Watchers: 5
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# riot-animate - Animate Riot 2

[![npm status](http://img.shields.io/npm/v/riot-animate.svg)](https://www.npmjs.org/package/riot-animate)

[![bower status](http://img.shields.io/bower/v/riot-animate.svg)]()

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

```css

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

}

```

```html

<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>

    var items = [];

    for(var x=0;x<100;x++) {

      items.push({time: 'time'})

    }

    riot.mount('timer', {items: items});

```

## Contributing

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