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

Question

好久不见了。无论如何，在制作动画时让绝对定位的元素保持居中有点困难。更重要的是，我在动画完成后看到元素“移动”，我不知道为什么。我发现的最接近的问题是 css animations moves element position但这并没有解决这个常见用例。

调试动画帧，我们可以看到如下:

动画期间

动画后

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

例子:

<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>

和使用 animate.css 的 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>