Animate.cssでCSSアニメーションを簡単に実装

Animate.css

CSSアニメーションについての知見があんまり溜まっていないので、 こういったライブラリは便利である。

以下雑な感想

• 基本的にはClassを当てれば動くようになっている
• jqueryで実装サンプルがあるので、参考にされたし。

以下は、Vue.jsのtransitionでアニメーションの時間を調整しつつ使う場合の超個人的メモ

  .bounce-transition {
    -webkit-animation-duration: .25s;
    animation-duration: .25s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .bounce-leave {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
  }

  .bounce-enter{
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
  }

<div id="app">
  <component is="comments" v-show="isComment" transition="bounce"></component>
</div>