Анимировать отображение элемента на странице с помощью CSS / SCSS - PullRequest
Новая
       8

Анимировать отображение элемента на странице с помощью CSS / SCSS

0 голосов
/ 05 октября 2018

Я хочу анимировать последовательность div, появляющихся на странице, один за другим.У меня настроена задержка анимации для всех из них, и анимация применяется для каждого из них в правильное время.

Но!Я хочу анимировать от display: block до display: none, что, я знаю, невозможно.Я пробовал visibility: hidden + opacity: 0 + height и анимировал их, но это не позиционирует элементы так, как я хочу, потому что они идут прямо в конечную позицию, где в конечном итоге оказываются настраница, когда все в порядке, вместо того, чтобы отталкивать друг друга в сторону, как я хотел бы с помощью анимации дисплея.

Как я могу заставить их каждого начинать в одном месте и отталкивать друг друга с пути, покаконец анимации без JavaScript или позиционирования вручную?

Мой текущий код SCSS (есть 14 text делений для анимации): 

.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);
  }
}

Ответы [ 2 ]

0 голосов
/ 05 октября 2018

Если вы учитываете 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 и определенно увеличивает сложность!?

0 голосов
/ 05 октября 2018

вы хотите, чтобы ваша анимация выглядела следующим образом 

@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;
}

, а затем, когда вы запускаете анимацию, установите отображение на блокировкуа затем оживить непрозрачность.

...