CSS анимация в столбце - PullRequest
Новая
       11

CSS анимация в столбце

0 голосов
/ 04 января 2019

У меня есть много div, сложенных в столбце. Когда вершина div будет уничтожена, нижняя divs естественным образом поднимется и наоборот. Я хочу, чтобы этот переход был плавным.

Как мне этого добиться? Применять ли класс анимации CSS к каждому вставленному элементу div? Я сбит с толку. Просьба совета. Спасибо. 

$add = document.getElementById('add');
$remove = document.getElementById('remove');
$parent = document.getElementById('parent');


let i = 0
$add.onclick = function() {
  let el = document.createElement("DIV");
  let text = document.createTextNode("Hello " + i);
  el.appendChild(text);
  $parent.insertBefore(el, $parent.firstElementChild);
  i++;
}

remove.onclick = function() {
  $parent.removeChild($parent.firstElementChild);
}
<button id="add" onclick="myFunction()">Add child on top</button>

<button id="remove" onclick="removeChlid()">remove child on top</button>

<div id="parent">

</div>

1 Ответ

0 голосов
/ 04 января 2019

Анимация может быть достигнута с помощью CSS, если мы добавляем элемент.

В случае удаления нам нужно сначала добавить класс перед удалением, чтобы запустить анимацию, а затем удалить элемент из DOM, когда анимация будет завершена. В примере есть та же самая задержка в 500 м, конечно, это можно сделать, также проверив событие animationEnd в js. 

$add = document.getElementById('add');
$remove = document.getElementById('remove');
$parent = document.getElementById('parent');


let i = 0
$add.onclick = function(){
	let el = document.createElement("DIV");
  el.className='test';
  let text = document.createTextNode("Hello "+ i );
  el.appendChild(text);
  $parent.insertBefore(el, $parent.firstElementChild);
  i++;
}

remove.onclick = function(){
  $parent.firstElementChild.className += ' remove-animation';
  setTimeout(() => {
    $parent.removeChild($parent.firstElementChild);
  }, 500)
	
}
.test {
  max-height: auto;
  animation: test-animation 0.5s;
  transition: max-height 0.5s;
  margin-bottom: 5px;
  overflow: hidden;
}

.remove-animation {
 animation: remove-animation 0.5s;
}

@keyframes test-animation {
  0%   { max-height: 0; }
  100% { max-height: 25px }
}

@keyframes remove-animation {
  0%   { max-height: 25px; }
  100% { max-height: 0 }
}
<button id="add" onclick="myFunction()">Add child on top</button>

<button id="remove" onclick="removeChlid()">remove child on top</button>

<div id="parent">
  
</div>
...