在屏幕上对齐元素时出现问题

在我的 React 应用中,我想使用以下技术将一个动画元素居中在屏幕上: 1. 将 `left` 设置为 50% 2. 将 `translateX` 设置为 `-50%` 动画只应影响 `translateY`,即在垂直方向上移动这个水平居中的元素。挑战在于: 1. 当我应用 `translateY` 动画时, `translateX` 和 `translateZ` 会自动设置为 (几乎) 0,覆盖了我通过 CSS 设置的值。 2. 将另一个 `translateX` 动画设置为 `-0.5*elWidth` 通常会失败。看起来好像 lax.js 无法计算元素的宽度,因此将其设置为 0。我不确定这是否仅限于 React。有时,如果您添加一个比 `-0.5*elWidth` 低的伪动画停止,则会有所帮助,但并非总是如此。 3. 将 `translateX` 动画设置为 `-50%` 被 lax 拒绝,它需要 elWidth。 4. 使用 `translateX(-50%) !important` 来覆盖变换也不起作用,因为它会覆盖 lax 的所有动画。