动画完成后绝对定位的元素移动

Question

已经有一段时间了。无论如何，要获得一个绝对定位的元素以使其在动画中保持居中 时会遇到一些麻烦。更重要的是，动画制作完成后，我看到元素“ shift”，我不知道为什么。我发现的最接近的问题是css animations moves element position，但这并不能解决这种常见用例。

调试动画帧，我们可以看到以下内容：

动画期间

动画后

好！进行定位不起作用，但是animation-fill-mode做了一些事情；但是，我注意到translate在动画期间或将animation-fill-mode设置为forwards或both时对定位的元素没有影响。为什么？副作用是动画完成时不会重新计算元素的位置，因此不会重新绘制。

示例：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

和CSS使用animate.css来简化生活：

.alert {
  min-width: 500px;
  position: absolute;
  top: 0;
  left: 50%;
  animation-name: fadeInDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
  /* animation-fill-mode: forwards; */
  transform: translateX(-50%);
}

演示：https://codepen.io/atomicpages/pen/yrymVY?editors=1100

目标：

1. 居中对齐
2. 元素至少为 500px
3. 动画帧完成后元素不会移动

感谢您的帮助。

Answer 1

在不使用animate.css的情况下使用自定义fadeInDown，因为它在fadeIndown中使用了transform: translate3d(0, -100%, 0)

.alert {
  width: 500px;
  top: 0;
  left: 50%;
  animation-name: fadeInDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform: translateX(-50%);
  position:absolute;
}

@keyframes fadeInDown{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@-webkit-keyframes fadeInDown{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

Answer 2

原因是内置的fadeInDown也为其动画使用了transform，因此，除非您使用animation-fill-mode: forwards;，否则重置/覆盖您的初始值，然后将其恢复。会使它始终保持左边缘50％。

并请注意，将transform之类的预设translateX“值”添加到“属性”中时，不会@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } 保留，所有现有值都将被覆盖。 / em>

原始CSS

translateX

要使您的工作正常，您需要覆盖内置值，并向其中添加@keyframes值，它将起作用。

并且如果您这样做，也会有一个前缀@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(-50%, -100%, 0); transform: translate3d(-50%, -100%, 0); } to { opacity: 1; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); } } 规则，该规则也需要更新。

新CSS

max-width

---

作为旁注：

使用提供的设置，它将始终占据全角并居中，除非您在其他地方也给它timezone.localtime(dt_value)，否则它将不起作用。

Answer 3

尝试删除transformX：translateX，动画之后，元素将保留在原处，然后将其更改为左侧：0;

.alert {
  min-width: 500px;
  top: 0;
  left: 0;
  animation-name: fadeInDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
}