动画打破了块对齐

Question

我的问题在下面的代码片段中可见。我的动画效果很好，但是在这里破坏器项目对齐。如果从其中删除动画，您将看到元素粘在一起，一起创建了一个标记。但是，如果我添加一个简单的移动动画，则它会崩溃。

我该怎么办，after元素会紧贴父级？谢谢

工作摘要：

.wrapper {
  position: relative;
  height: 100px;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

.p {
  border-radius: 50%;
  border: 2px solid red;
  background: #ccc;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p::after {
  position: absolute;
  content: '';
  width: 0;
  z-index: -1;
  height: 0;
  bottom: 32px;
  left: 12px;
  border: 10px solid transparent;
  border-top: 17px solid red;
}

<div class='wrapper'>
  <div class='p' />
</div>

无效的代码段（对齐错误）

.wrapper {
  position: relative;
  height: 100px;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

.p {
  border-radius: 50%;
  border: 2px solid red;
  background: #ccc;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: jump 2s infinite;
}

.p::after {
  position: absolute;
  content: '';
  width: 0;
  z-index: -1;
  height: 0;
  bottom: 32px;
  left: 12px;
  border: 10px solid transparent;
  border-top: 17px solid red;
}

<div class='wrapper'>
  <div class='p' />
</div>

Answer 1

使用动画添加变换将使p元素成为伪元素 ^ref 的包含块。因此，伪元素将相对于p定位，而不再相对于包装器定位。您需要制作p position:relative并更正伪元素的位置。这样做，无论有无动画，您将始终使伪元素相对于p定位：

.wrapper {
  position: relative;
  height: 100px;
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

.p {
  border-radius: 50%;
  border: 2px solid red;
  background: #ccc;
  width: 40px;
  height: 40px;
  position:relative;
  animation: jump 2s infinite;
}

.p::after {
  position: absolute;
  content: '';
  width: 0;
  z-index: -1;
  height: 0;
  top:100%;
  left: 10px;
  border: 10px solid transparent;
  border-top: 17px solid red;
}

<div class='wrapper'>
  <div class='p' ></div>
</div>

没有动画：

.wrapper {
  position: relative;
  height: 100px;
}

.p {
  border-radius: 50%;
  border: 2px solid red;
  background: #ccc;
  width: 40px;
  height: 40px;
  position:relative;
}

.p::after {
  position: absolute;
  content: '';
  width: 0;
  z-index: -1;
  height: 0;
  top:100%;
  left: 10px;
  border: 10px solid transparent;
  border-top: 17px solid red;
}

<div class='wrapper'>
  <div class='p' ></div>
</div>

Answer 2

问题是绝对定位的元素是相对于包装器而言的，而不是p。我在该元素上应用了动画，现在看起来不错，希望对您有所帮助！

.wrapper {
  position: relative;
  height: 100px;
  -webkit-animation: jump 5s infinite; /*this is the fix*/
  -moz-animation:    jump 5s infinite; 
  -o-animation:      jump 5s infinite; 
  animation: jump 5s infinite;

}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}

.p {
  border-radius: 50%;
  border: 2px solid red;
  background: #ccc;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p::after {
  position: absolute;
  content: '';
  width: 0;
  z-index: -1;
  height: 0;
  bottom: 32px;
  left: 12px;
  border: 10px solid transparent;
  border-top: 17px solid red;
}

<div class='wrapper'>
  <div class='p' />
</div>