Cacher is the code snippet organizer for pro developers

なんすか

お手軽にアニメーション実装できるライブラリ。

公式

• https://daneden.github.io/animate.css/
• https://github.com/daneden/animate.css

どうやるの

1. どうにゅう
2. どれにしよーかなー
3. クラス名どれかなー
4. 2 のクラス名と animated つける
5. 以上。

サンプル1

// in riot.js
// animate.css 読み込んでる前提

<h2>
  Heading
  <span if="{ this.items.length != 0 }" class="animated new badge">
  <!-- new と badge は materialize.css のやつです -->
</h2>

<script>
this.items = []

// this.items にモノが入って
// this.update() したら出現→フェードアウト
this.on('updated', () => { 
  let badge = document.querySelector('.badge')
  setTimeout(() => {
    badge.classList.add('fadeIn')
  }, 5000)
  badge.classList.remove('fadeIn')
  setTimeout(() => {
    badge.classList.add('fadeOut')
  }, 5000)
  badge.classList.remove('fadeOut')
})
</script>

サンプル2 - jQuery 連携パターン

$.fn.extend({
  animateCss: function (animationName) {
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);
    });
    return this;
  }
});

// use it like this: 
$('#yourElement').animateCss('bounce');