Help us understand the problem. What is going on with this article?

【Vue.js】トランジションクラスの発動タイミングまとめ【デモ付き】

はじめに

Vue.jsのトランジションクラスが発動するタイミングをまとめました。

公式サイトはこちら

この記事が役に立つ方

  • Vue.js初心者

この記事のメリット

  • トランジションクラスがいつ発動するのかがわかる。

環境

- OS: macOS Catalina 10.15.1
- Vue: 2.6.10

transitionとは?

Vue.jsの機能で、CSSトランジション/アニメーションをより使いやすくサポートしてくれます。

基本構文

index.html
...略
<div id="app">
  <transition>
    トランジションさせたい要素
  </transition>
</div>
...略
main.js
new Vue ({
  el: '#app'
})

シンプルに<transition>で囲むだけなので簡単です。

トランジションクラス一覧

※画像の例はopacityをいじった場合です。

Enter系

スクリーンショット 2019-12-13 22.35.49.png

トランジションクラス タイミング
.v-enter 開始
.v-enter-to 終了
.v-enter-active 変化している間

Leave系

スクリーンショット 2019-12-13 22.35.54.png

トランジションクラス タイミング
.v-leave 開始
.v-leave-to 終了
.v-leave-active 変化している間

※画像は公式ドキュメントから拝借しました。

タイミング確認用デモ

See the Pen rNaMNgo by terufumi (@terufumi1122) on CodePen.

おわりに

最後まで読んで頂きありがとうございました:bow_tone1:

余談にはなりますが、初めてCODEPENを埋め込んでみました!
コピペだけで出来るとは思っておらず、かなりハードル低かったです:grin:

参考にさせて頂いたサイト(いつもありがとうございます)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした