Ячейка сетки не исчезает из макета после окончания анимации - PullRequest
Новая
       5

Ячейка сетки не исчезает из макета после окончания анимации

2 голосов
/ 02 августа 2020

Когда моя анимация закончится, мой элемент bottom_row должен исчезнуть (поскольку display: none установлен в 100%), но этого не происходит. Почему? 

  .bottom_row {
    opacity: 1;
    animation: hide 5s linear 0s 1 normal forwards running;
  }

  @keyframes hide {
    0% {
      opacity: 1;

    }

    95% {
      opacity: 0.05;
    }

    100% {
      opacity: 0;
      display: none;
      color: red;
      font-size: 48px;
    }
  }
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <header>
    <nav class="header_nav_container">
      <div class="top_row">
        TOP ROW CONTENT
      </div>
      <div class="bottom_row">
        BOTTOM ROW CONTENT
      </div>
      <div class="third_row">
        THIRD ROW CONTENT
      </div>
    </nav>
  </header>
</body>
</html>

Если я просто установлю display: none; сразу, ячейка не будет присутствовать в макете (это то, что я хочу конец моего анима): 

  .bottom_row {
    opacity: 1;
    display: none;
  }
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
  <header>
    <nav class="header_nav_container">
      <div class="top_row">
        TOP ROW CONTENT
      </div>
      <div class="bottom_row">
        BOTTOM ROW CONTENT
      </div>
      <div class="third_row">
        THIRD ROW CONTENT
      </div>
    </nav>
  </header>
</body>
</html>

Как заставить элемент исчезнуть из макета / сетки без js? Возможно ли и почему не работает с анимацией?

1 Ответ

3 голосов
/ 02 августа 2020

Вы можете использовать вместо него height: 0;overflow:hidden;, и вы получите тот же визуальный результат: 

.bottom_row {
  opacity: 1;
  animation: hide 5s linear  forwards ;
}

@keyframes hide {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 0.05;
  }
  100% {
    opacity: 0;
    height: 0;
    overflow:hidden;
    color: red;
    font-size: 48px;
  }
}
<header>
  <nav class="header_nav_container">
    <div class="top_row">
      TOP ROW CONTENT
    </div>
    <div class="bottom_row">
      BOTTOM ROW CONTENT
    </div>
    <div class="third_row">
      THIRD ROW CONTENT
    </div>
  </nav>
</header>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...