# Animate.css

使う機会があったのでメモ。

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

# Vue

# v-bind

v-bind は省略できる。

以下 2 つは同じ。

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

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

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

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

# 結果

bounce

flash duration

flash delay

flash inifinite

# 参考