[Vuejs]-Vuejs transition being does not work with child elemenets

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.