Layout Animation Doesn’t Work When sibling component wrapped with AnimatePresence

[thmsfchtnr]

Description
When using a layout component whose width is animated based on another sibling component presence, the layout animation fails to work if the sibling components is wrapped with AnimatePresence.

stackblitz
Stackblitz

3. Steps to reproduce

1. Toggle the checkbox

4. Expected behavior
The width of the layout animation div should animate.

[rick-hup]

hi! @thmsfchtnr i have open a discuss in https://github.com/orgs/vuejs/discussions/12770,
because sibling components onBeforeUpdate get the width after the DOM update instead of before. so it can't trigger layout change.

currently, you can move sibling components into AnimatePresence to fix it.

[thmsfchtnr]

Hi @rick-hup

Thank you for opening the discussion and for providing a clear explanation about the behavior of sibling components’ onBeforeUpdate lifecycle triggering after the DOM update.

This workaround works perfectly for my use case. I appreciate your quick response! :)

[rick-hup]

#vuejs/core#12826 A bug has been reported in Vue.