Vuejs transition being does not work with child elemenets

Question

I have the following project: https://codesandbox.io/s/vue-template-c1rj1

I expect the image to just come up from the bottom of the screen already being in the middle of the page, but it first comes up from the bottom and then moves to the center of the page. I noticed that setting the width of the notification-box class to 100% fixes it but I am not exactly sure why.

Answer 1

The reason this is not working is because the fixed css property positions an element relative to the parent layer. Usually this is the viewport.

However, the transition property creates a new layer for the the Element it is used on. In your case, Vue applies the transition property during the animation - making the notification-box the next parent-layer (with a width of 0).

Positioning your Image 50% (of 0) left, does not do anything.

Once the animation is over, the transition property disappears, making the viewport once again the next parent layer. Now 50% left (of the viewport) gives you the desired result.