0

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.

Andrew Vasylchuk
  • 4,671
  • 2
  • 12
  • 30
Enea G UnlimApps
  • 273
  • 3
  • 11

1 Answers1

0

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.

MarcRo
  • 2,434
  • 1
  • 9
  • 24
  • Thanks. Is there a way to have vue/transition use the viewport instead of the parent? – Enea G UnlimApps Aug 18 '19 at 11:57
  • `position: fixed` will position children relative to the next parent that has the `transition` property; you cannot manually set the layer. A workaround would be to position the 'notification-box' 50% to the left instead of the child. – MarcRo Aug 18 '19 at 14:30