Vue version

3.3.7

Link to minimal reproduction

https://play.vuejs.org/#eNq1U01T2zAQ/SuqLqEzxO6Um2syhU4O7aEwbW51D66ydgWypJHWJkwm/52VZYyADDdu2o/39u1qd88vrM2GHnjBSy+ctMg8YG9XlZadNQ7Znjlo2IE1znRsQamLL3Nsc2fWCjrQ6Kd4lie+QJxkX2mYInPyk+sxVxjtkaFpWwXsPNQ+QdfDx0qXeRRI0shA6KyqEcgq//WIRrOvQklxe17xGf0hviq+io8yj6kEYqzcuFp7iXKygyfpp4iQma7iLI+4/AUwIWKd2QaI6XEpNdWdiJPWX/MepS3ztEOP99SQF8bCluxsWBIVuGWY4+loK6gHWKJh+0BmbC0k3hfsE430kABqgXKAFBI9EYazguKRgn32kYLGH0RQdX7KkaToRrbZjTeadmdEV1yYzkoF7soGDl/xIvKGWK2Uufsx+sKHkoToF/9B3B7x3/hd8FX82oEHN9Cg5hjWrgWM4fXvn7Cj9xykL+jDWN8I/gJvVB80xrTLXm9JdpI3qv0+7q3U7cavdwg0mqmpIDRkHsb8itPufnuj9Se5Z9nZiKOJ0hRfnMqRG9xCIzVcO2P9yZ9FXJjF3+fHkJ7CuGyWDUvZJAu2uijzwDZHQXlYXUZnsmgk6flBvruitPjhAX5BjpA=

Steps to reproduce

Click a toggle button.

What is expected?

A or B in the <TwoElements> component disappears in 2 seconds and appears in 2 seconds like A in the <OneElement>.

What is actually happening?

A or B in the <TwoElements> component disappears immediately and appears in 2 seconds.

System Info

System:
    OS: macOS 13.5.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 32.77 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.15.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 9.5.0 - /usr/local/bin/npm
    pnpm: 7.28.0 - /usr/local/bin/pnpm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 118.0.5993.117
    Edge: 118.0.2088.69
    Safari: 16.6
  npmPackages:
    vue: ^3.3.7 => 3.3.7

Any additional comments?

No response

This is a known change between Vue 2 and Vue 3 - in Vue 3, the transition can only be triggered by v-if or v-show in the same template with the <transition> component. This is intended behavior.

I understand. Could you please share why this behavior is intentional and when it is helpful?

here is a workaround: add a dynamic key. see demo

<Transition mode="out-in">
  <TwoElements :key="+toggle" :toggle="toggle" />
</Transition>