css - 使用 CSS/SCSS 在页面上动画显示元素

Question

我想对出现在页面上的一系列 div 进行动画处理，一个接一个。我对它们都设置了动画延迟，并且在正确的时间为每个应用了动画。

但是!我想要制作动画的是 display: block 到 display: none，我知道这是不可能的。我已经尝试了 visibility: hidden + opacity: 0 + height 并为它们设置动画，但这并没有按原样定位元素我想这样做，因为它们会直接到达结束位置，一旦所有内容都进入页面，它们最终就会出现在页面上，而不是像我想要的显示动画那样相互推开。

我如何让它们从一个位置开始并相互推开直到动画结束而不用 JavaScript 或手动定位？

我当前的 SCSS 代码(有 14 个 text div 要在其中设置动画):

.text-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5px;
  width: 100%;
  height: 170px;
  box-sizing: border-box;
  overflow: hidden;
  .text {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    align-self: flex-start;
    margin: 3px 3px 0;
    padding: 5px;
    max-width: 80%;
    box-sizing: border-box;
    animation: 7s text-bubble infinite;
  }
  // ------------ animation delay
  @for $i from 1 through 14 {
    .text {
      &:nth-child(#{$i}) {
        animation-delay: $i * 1s;
      }
    }
  }
  // ------------
}
@keyframes text-bubble {
  0% {
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    transform: scale(1);
  }
  50% {
    visibility: visible;
    opacity: 1;
    max-height: 170px;  
    transform: scale(1.15);
  }
  100% {
    visibility: visible;
    opacity: 1;
    max-height: 170px;
    transform: scale(1);
  }
}

Answer 1

如果您将每个元素的 margin 和 padding 以及 max-height 考虑在内，您可以获得一个看起来合理的动画那应该可以完成您正在寻找的东西。

@keyframes text-bubble {
  0% {
    visibility: hidden;
    opacity: 0;
    max-height: 0px;
    margin: 0;
    padding: 0;
    transform: scale(1);
  }
  1% {
    padding: 5px;
    margin: 3px;
    visibility: visible;
  }
  80% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% { 
    max-height: 170px;
    transform: scale(1);
  }
}

https://codepen.io/shshaw/pen/MPemKa/

我应该注意，这会触发大量布局计算，JavaScript FLIP 方法的性能会更高，但确实违反了纯 CSS 的要求，而且肯定会增加复杂性! 😄