塩焼きブログ

塩焼きに関しての研究内容を公開しています

Vue.jsでCSS3のアニメーションを再スタートする

テンプレートがこんな感じで

<div class="animation" v-bind:class="{ start: this.hoge }"></div>

データをこのように用意しておいてfalseではなくtrueになったら.startというclassを付けることでアニメーションを起こさせます。

export default {
  data() {
    return {
      hoge: false,
    }
  },
  methods: {
    go() {
      this.hoge = true;
    }
  }
}

あとはthis.go()を実行すればアニメーションが実行されるのですが、このままでは何度ゴーしてもアニメーションが再実行されません。

これを何度もゴーさせるにはこのように一度classを外してから付け直す事で可能です。

export default {
  data() {
    return {
      hoge: false,
    }
  },
  methods: {
    go() {
      let truenisuru = () => {
        this.hoge = true;
      };

      if (this.hoge) {
        this.hoge = false;
        window.setTimeout(() => {
          truenisuru();
        }, 100);
      } else {
        truenisuru();
      }
    }
  }
}

ポイントが遅延をさせています。そのままストレートにfalseにしてからtrueにしても早すぎてアニメーションが再実行されないためです。

Vue.jsでなければ要素を削除したり(メモリの圧迫を防ぐためにそれぞれのオブジェクトには自分で自分を使われなくなった消すような動作をさせて。。)といった処理も思いつけると思うんですが、コンポーネントの変な使い方になりそうだし、ちょっとオブジェクトの管理についても調べるのが面倒なので、付け直すといった動作で対応するのが無難そうでした。