Animate.css を試してみた

Animate.css を使う機会があったときのメモ。

Animate.css より、Vue の内容が多くなってしまった。

Vue

v-bind

v-bind は省略できる。

以下 2 つは同じ。

• p.animated(:class="{ 'bounce': isActive }")
• p.animated(v-bind:class="{ 'bounce': isActive }")

複数のクラスを同時に当てる

以下のように書くと、 isActive の真偽性によって、bounce と duration のクラスを当てることができる。

• p.animated(:class="{ 'bounce duration': isActive }")

click

v-on:click は @click とかける。

以下 2 つも同じ。

• button(v-on:click="click")
• button(@click="click")

例

<!-- Sample.vue -->

<template lang="pug">
.sample
  link(rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css")
  p.animated(:class="{ 'bounce': isActive }") bounce
  p.animated(:class="{ 'bounce duration': isActive }") flash duration
  p.animated(:class="{ 'bounce delay': isActive }") flash delay
  p.animated(v-bind:class="{ 'bounce infinite': isActive }") flash inifinite
  button(@click="click")
    span(v-if="isActive") とめる
    span(v-else) ばうんす
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    click() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

<style lang="scss" scoped>
.sample {
  .animated {
    margin: 50px 0;
  }
  .duration {
    animation-duration: 3s;
  }
  .delay {
    animation-delay: 2s;
  }
  .infinite {
    animation-iteration-count: infinite;
  }
}
</style>

結果

参考

• Animate.css
• GitHub - daneden/animate.css: 🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
• Vue.js の v-bind:class で動的なクラス割り当て - 親バカエンジニアのナレッジ帳
• クラスとスタイルのバインディング — Vue.js
• イベントハンドリング — Vue.js
• 条件付きレンダリング — Vue.js
• [Vue warn]: The "data" option should be a function · Issue #14 · mobxjs/mobx-vue · GitHub