CSS анимация / ключевые кадры, когда элементы удаляются из DOM в DIV? - PullRequest
Новая
       27

CSS анимация / ключевые кадры, когда элементы удаляются из DOM в DIV?

0 голосов
/ 02 мая 2019

Я написал некоторый код, который автоматизирует тосты BS4, чтобы я мог вызывать их на лету с опциями.Когда новый контейнер добавляется в контейнер, он отображается ниже предыдущего.Когда тост истекает, он удаляется из дома.Когда это происходит, тост исчезает (из-за классов BS .fade .show), и когда эта анимация завершается, весь тост удаляется из DOM.Все работает как надо, но в это время также происходит, когда любые другие тосты «поднимаются / опускаются» в контейнере с момента его удаления.Есть ли способ оживить движение существующих тостов, когда другой тост удаляется из дома?То есть они не «прыгают» в свои новые места?

Вот пример того, на что я смотрю, когда у моего контейнера два тоста: 

<div id="toasts" aria-live="polite" aria-atomic="true">
    <div id="toasts-container">

        <div id="App_toast_288951045797" class="toast toast-info fade show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            ...content
        </div>

        <div id="App_toast_288951046236" class="toast toast-info fade show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            ...content
        </div>

    </div>
</div>

Удаляет из dom после тостазакрыто: 

$('body').on('hidden.bs.toast', '.toast', function () {
    $(this).remove();
});

Для тех из вас, кто не понимает, о чем я спрашиваю. 

<div id="div1">number one</div>
<div id="div2">number two</div>
<div id="div3">number three</div>

Поместите вышеизложенное на странице.Удалите # div1 из домена.Что просходит?# div2 и # div3 движутся вверх, потому что # div1 больше не существует.Мне интересно, можно ли анимировать это движение, чтобы оно не произошло мгновенно.

1 Ответ

1 голос
/ 02 мая 2019

В вашем вопросе недостаточно (не псевдо) HTML-кода, чтобы я мог дать вам более полезный фрагмент, но ниже приведен простой пример, который должен объяснить суть.

Решение состоит в том, чтобы оживить высоту элемента.

Базовый подход:

  1. исчезающий элемент
  2. как только оно исчезло, оживите / измените его высоту до 0px
  3. после высоты 0 пикселей удалите его из DOM

Попробуйте щелкнуть первый или второй элемент в списке здесь: 

$(function() {
  $('.toast').on('click', function() {
    var $this = $(this);
    $this.addClass('animate');
    setTimeout(function() {
      $this.remove();
    }, 800);
  });
});
.toast {
  height: 30px;
  opacity: 1;
  transition: opacity 350ms ease, height 350ms ease 400ms;
  color: white;
  cursor: pointer;
}
.toast:nth-child(1) {
  background-color: navy;
}
.toast:nth-child(2) {
  background-color: steelblue;
}
.toast:nth-child(3) {
  background-color: powderblue;
}
.animate {
  opacity: 0;
  height: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="toasts">
  <div class="toast">lorem ipsum</div>
  <div class="toast">dolor sit amet</div>
  <div class="toast">consectetur adipiscing</div>
</div>
...