Vue.js

# ルートとしてのトランジション
breaking

# 概要

コンポーネントのルートに <transition> を使うとき、外部からコンポーネントがトグルされても、トランジションをトリガーしなくなりました。

# 2.x での挙動

Vue 2 では、コンポーネントのルートに <transition> を使うことで、コンポーネントの外部からトランジションをトリガーすることができました:

<!-- modal component -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>
1
2
3
4
5
6
<!-- usage -->
<modal v-if="showModal">hello</modal>
1
2

showModal の値をトグルすると、モーダルコンポーネントの内部でトランジションをトリガーしました。

これは設計にはなく、偶然に動きました。<transition> は <transition> 自身をトグルするのではなく、その子の変更によってトリガーされるようになっています。

この癖は現在では取り除かれています。

# 移行の戦略

似たような効果は、代わりにコンポーネントにプロパティを渡すことでも得られます:

<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>
<script>
export default {
  props: ['show']
}
</script>
1
2
3
4
5
6
7
8
9
10
<!-- usage -->
<modal :show="showModal">hello</modal>
1
2

# 参照

← トランジショングループのルート要素 →