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的每一项都考虑在内，则可以得到外观合理的动画，该动画应该可以满足您的需求。 / p>

@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的要求，并且肯定会增加复杂性！

Answer 2

您将希望动画看起来像这样

@keyframes text-bubble {
  0% {
   display: block;
   opacity: 0;
   max-height: 0;
   transform: scale(1);
  }
  50% {
   opacity: 1;
   max-height: 170px;  
   transform: scale(1.15);
  }
  100% {
   opacity: 1;
   max-height: 170px;
   transform: scale(1);
  }
}

因此，一开始您的对象将不显示，

.text{
   display: none;
}

然后，当您开始动画时，将显示设置为阻塞，然后为不透明度设置动画。

使用CSS / SCSS对页面上的显示元素进行动画处理

2 个答案: