vue.js - Vuejs 过渡不适用于子元素

Question

我有以下项目：https ://codesandbox.io/s/vue-template-c1rj1

我希望图像刚刚从屏幕底部出现已经在页面中间，但它首先从底部出现，然后移动到页面中心。我注意到将通知框类的宽度设置为 100% 可以解决此问题，但我不确定为什么。

Answer 1

这不起作用的原因是fixedcss 属性相对于父层定位元素。通常这是视口。

但是，该transition属性会为其使用的元素创建一个新层。在您的情况下，Vuetransition在动画期间应用该属性 - 使通知框成为下一个父层（宽度为 0）。

将您的图像定位到左侧 50%（共 0 个），不会做任何事情。

动画结束后，该transition属性消失，使视口再次成为下一个父层。现在（视口的）剩余 50% 为您提供所需的结果。