<commit_before>title: トランジションシステム
type: guide
order: 12
---

Vue.js のトランジションシステムを使用すると、DOM から要素を取得したり削除するといったトランジションエフェクトを自動的に適用できます。Vue.js は自動的に、適切な時に、あなたのために CSS トランジションまたはアニメーションをトリガするため、CSS クラスを追加または削除し、そしてトランジションの間は、カスタム DOM の操作をするために、JavaScript フック関数を提供することができます。

これには、CSS トランジションや CSS アニメーションによる定義と、登録したカスタム JavaScript を含む定義オブジェクトをフックする2つのオプションがあります。

`v-transition="my-transition"` というディレクティブを適用した場合：

1. `"my-transition"` の ID を使用して、`Vue.transition(id, hooks)` または、`transitions` オプションを通じて登録された JavaScript のトランジションのフックオブジェクトを探します。それが見つかると、さまざまな段階で、適切なフックを呼びます。

2. 自動的に、対象の要素に CSS トランジションか CSS アニメーションが適用されているか調べ、適切なタイミングで CSS クラスを追加/削除します。

3. もし、JavaScript フックが提供されていない、かつ CSS アニメーションも見つからなければ、次のフレームで直ちに DOM 操作(挿入/削除)が実行されます。

<p class="tip">Vue.js のすべてのトランジションは、内蔵のディレクティブ（ `v-if` など）や Vue のインスタンスメソッド（ `vm.$appendTo()` など）を通じて DOM 操作が適用された時のみ実行されます。</p>

## CSS トランジション

基本的な CSS トランジションは、次のようになります。

``` html
<div class="msg" v-if="show" v-transition="expand">hello!</div>
```

また `.expand-transition`クラス、`.expand-enter` クラスそして `.expand-leave` クラスの CSS ルールを定義する必要があります。

``` css
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
```

加えて、JavaScript フックを提供できます。

``` js
Vue.transition('expand', {
  beforeEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  enter: function (el) {
    el.textContent = 'enter'
  },
  afterEnter: function (el) {
    el.textContent = 'afterEnter'
  },
  enterCancelled: function (el) {
    // 取り消しハンドル
  },

  beforeLeave: function (el) {
    el.textContent = 'beforeLeave'
  },
  leave: function (el) {
    el.textContent = 'leave'
  },
  afterLeave: function (el) {
    el.textContent = 'afterLeave'
  },
  leaveCancelled: function (el) {
    // 取り消しハンドル
  }
})
```

<div id="demo"><div class="msg" v-if="show" v-transition="expand">Hello!</div><button v-on="click: show = !show">Toggle</button></div>

<style>
.expand-transition {
  transition: all .3s ease;
  padding: 10px;
  height: 30px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
</style>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true,
    transitionState: 'Idle'
  },
  transitions: {
    expand: {
      beforeEnter: function (el) {
        el.textContent = 'beforeEnter'
      },
      enter: function (el) {
        el.textContent = 'enter'
      },
      afterEnter: function (el) {
        el.textContent = 'afterEnter'
      },
      beforeLeave: function (el) {
        el.textContent = 'beforeLeave'
      },
      leave: function (el) {
        el.textContent = 'leave'
      },
      afterLeave: function (el) {
        el.textContent = 'afterLeave'
      }
    }
  }
})
</script>

追加とトグルするクラス名の接頭辞は、`v-transition` ディレクティブの値に基づきます。`v-transition="fade"` と `.fade-transition` クラスと常に与えられた場合、トグルするクラス名の接頭辞は頃合いのよいときに自動的に、`.fade-enter` と`.fade-leave` になります。値がない場合は、`.v-transition`、`.v-enter`、そして `.v-leave` がデフォルトになります。

`show` プロパティに変更があると、それに応じて Vue.js は `<p>` 要素を追加/削除し、以下に指定されているようにトランジションクラスを適用します。

- `show` プロパティが `false` の場合：
  1. `beforeLeave` フックを呼びます。
  2. `v-leave` クラスを要素に適用し、トランジションをトリガします。
  3. `leave` フックを呼びます。
  4. トランジションが終わるまで待ちます。(`transitionend` イベントをリスニングします)
  5. DOM から要素と `v-leave`　を削除します。
  6. `afterLeave` フックを呼びます。

- `show` プロパティが `true` の場合：
  1. `beforeEnter` フックを呼びます。
  2. `v-enter` クラスを要素に適用します。
  3. それを DOM に挿入します。
  4. `enter` フックを呼びます。;
  5. `v-enter` が実際に適用されるように CSS レイアウトを強制し、それから要素を元の状態にトランジションを戻すのをトリガするため、`v-enter` クラスを削除します。
  6. トランジションが終わるまで待ちます。
  7. `afterEnter` フックを呼びます。

加えて、もし enter トランジションが進行中のときに要素が削除される場合、`enterCancelled` フックは、変更を一掃する、または `enter` でタイマーが作成されるための機会を与えるために呼び出されます。逆である leaving トランジションも同じです。

上記のようなフック関数の全ては、それらの `this` コンテキストは関連付けられた Vue インスタンスを設定して呼び出されます。もし要素が Vue インスタンスのルートノードの場合、そのインスタンスはそのコンテキストとして使用されます。それ以外の場合は、そのコンテキストはトランジションディレクティブのインスタンスの所有者になります。<commit_msg>Apply commit hash 34f178252dabe60f1baac6d0d1cf60538268f9c4<commit_after>title: トランジションシステム
type: guide
order: 12
---

Vue.js のトランジションシステムを使用すると、DOM から要素を取得したり削除するといったトランジションエフェクトを自動的に適用できます。Vue.js は自動的に、適切な時に、あなたのために CSS トランジションまたはアニメーションをトリガするため、CSS クラスを追加または削除し、そしてトランジションの間は、カスタム DOM の操作をするために、JavaScript フック関数を提供することができます。

これには、CSS トランジションや CSS アニメーションによる定義と、登録したカスタム JavaScript を含む定義オブジェクトをフックする2つのオプションがあります。

`v-transition="my-transition"` というディレクティブを適用した場合：

1. `"my-transition"` の ID を使用して、`Vue.transition(id, hooks)` または、`transitions` オプションを通じて登録された JavaScript のトランジションのフックオブジェクトを探します。それが見つかると、さまざまな段階で、適切なフックを呼びます。

2. 自動的に、対象の要素に CSS トランジションか CSS アニメーションが適用されているか調べ、適切なタイミングで CSS クラスを追加/削除します。

3. もし、JavaScript フックが提供されていない、かつ CSS アニメーションも見つからなければ、次のフレームで直ちに DOM 操作(挿入/削除)が実行されます。

<p class="tip">Vue.js のすべてのトランジションは、内蔵のディレクティブ（ `v-if` など）や Vue のインスタンスメソッド（ `vm.$appendTo()` など）を通じて DOM 操作が適用された時のみ実行されます。</p>

## CSS トランジション

基本的な CSS トランジションは、次のようになります。

``` html
<div class="msg" v-if="show" v-transition="expand">hello!</div>
```

また `.expand-transition`クラス、`.expand-enter` クラスそして `.expand-leave` クラスの CSS ルールを定義する必要があります。

``` css
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
```

加えて、JavaScript フックを提供できます。

``` js
Vue.transition('expand', {
  beforeEnter: function (el) {
    el.textContent = 'beforeEnter'
  },
  enter: function (el) {
    el.textContent = 'enter'
  },
  afterEnter: function (el) {
    el.textContent = 'afterEnter'
  },
  enterCancelled: function (el) {
    // 取り消しハンドル
  },

  beforeLeave: function (el) {
    el.textContent = 'beforeLeave'
  },
  leave: function (el) {
    el.textContent = 'leave'
  },
  afterLeave: function (el) {
    el.textContent = 'afterLeave'
  },
  leaveCancelled: function (el) {
    // 取り消しハンドル
  }
})
```

<div id="demo"><div class="msg" v-if="show" v-transition="expand">Hello!</div><button v-on="click: show = !show">Toggle</button></div>

<style>
.expand-transition {
  transition: all .3s ease;
  padding: 10px;
  height: 30px;
  background-color: #eee;
  overflow: hidden;
}
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
</style>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true,
    transitionState: 'Idle'
  },
  transitions: {
    expand: {
      beforeEnter: function (el) {
        el.textContent = 'beforeEnter'
      },
      enter: function (el) {
        el.textContent = 'enter'
      },
      afterEnter: function (el) {
        el.textContent = 'afterEnter'
      },
      beforeLeave: function (el) {
        el.textContent = 'beforeLeave'
      },
      leave: function (el) {
        el.textContent = 'leave'
      },
      afterLeave: function (el) {
        el.textContent = 'afterLeave'
      }
    }
  }
})
</script>

追加とトグルするクラス名の接頭辞は、`v-transition` ディレクティブの値に基づきます。`v-transition="fade"` と `.fade-transition` クラスと常に与えられた場合、トグルするクラス名の接頭辞は頃合いのよいときに自動的に、`.fade-enter` と`.fade-leave` になります。値がない場合は、`.v-transition`、`.v-enter`、そして `.v-leave` がデフォルトになります。

`show` プロパティに変更があると、それに応じて Vue.js は `<div>` 要素を追加/削除し、以下に指定されているようにトランジションクラスを適用します。

- `show` プロパティが `false` の場合：
  1. `beforeLeave` フックを呼びます。
  2. `v-leave` クラスを要素に適用し、トランジションをトリガします。
  3. `leave` フックを呼びます。
  4. トランジションが終わるまで待ちます。(`transitionend` イベントをリスニングします)
  5. DOM から要素と `v-leave`　を削除します。
  6. `afterLeave` フックを呼びます。

- `show` プロパティが `true` の場合：
  1. `beforeEnter` フックを呼びます。
  2. `v-enter` クラスを要素に適用します。
  3. それを DOM に挿入します。
  4. `enter` フックを呼びます。
  5. `v-enter` が実際に適用されるように CSS レイアウトを強制し、それから要素を元の状態にトランジションを戻すのをトリガするため、`v-enter` クラスを削除します。
  6. トランジションが終わるまで待ちます。
  7. `afterEnter` フックを呼びます。

加えて、もし enter トランジションが進行中のときに要素が削除される場合、`enterCancelled` フックは、変更を一掃する、または `enter` でタイマーが作成されるための機会を与えるために呼び出されます。逆である leaving トランジションも同じです。

上記のようなフック関数の全ては、それらの `this` コンテキストは関連付けられた Vue インスタンスを設定して呼び出されます。もし要素が Vue インスタンスのルートノードの場合、そのインスタンスはそのコンテキストとして使用されます。それ以外の場合は、そのコンテキストはトランジションディレクティブのインスタンスの所有者になります。
{'fraction_non_alphanumeric': 0.13828472565496788, 'fraction_numerical': 0.012605042016806723, 'mean_word_length': 4.282637075718016, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 33, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4122622', 'n_tokens_mistral': 4934, 'n_tokens_neox': 4619, 'n_words': 600}