Анимировать родителя на удалении ребенка

Question

У меня есть эта корзина, которая содержит .cartItem детей, с их CSS ниже:

.cartItemsContainer {
    overflow: auto;
    overflow-x: hidden;
    padding: 10px;
    transition: all .4s ease;
}

.cartItem {
    display: inline-block;
    position: relative;
    width: 100%;
    padding: 4px;
    transition: all .4s ease;
}

.cartItemSlide {
    padding-left: 350px;
    opacity: 0;
}

У меня есть этот код Javascript, который выполняется, когда я удаляю элемент корзины:

// make it disappear with a CSS transition, then delete it when out of sight
cartItem.classList.add('cartItemSlide');
onTransitionEnd(cartItem, 'padding-left', () => 
{
    cartItem.parentNode.removeChild(cartItem);
});

Итак, у меня есть элемент корзины, который сдвигается вправо, а затем удаляется после завершения этого перехода. Проблема заключается в том, что когда элемент корзины удаляется из DOM, нет перехода по высоте для моей cartItemsContainer

Я хочу, чтобы родительская высота плавно уменьшалась, когдаего ребенок удален, как мне этого добиться?

Answer 1

Я сделал быстрое возможное решение, вы можете настроить его под свои нужды:

var div = document.getElementById('div');
var p = document.getElementsByClassName('p');

for(var i = 0; i < p.length; i++) {
  p[i].addEventListener("click", function(e) {
    myFunc(e);
  });
}

function myFunc(e) {
  e.target.innerHTML = '';
  e.target.style.maxHeight = '0px';
  e.target.style.padding = '0';
}

div {
  outline : 1px solid red;
  padding: 10px;
}

p {
  padding: 10px;
  max-height: 100px;
  background: #000;
  color: #fff;
  transition: all 0.2s linear;
}

<div id=div class=div>
  <p class=p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint laboriosam itaque dolore aspernatur labore, blanditiis nesciunt sapiente architecto veniam quo culpa, quibusdam beatae dolorem esse dignissimos commodi, distinctio laborum perferendis.</p>
  <p class=p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur id exercitationem magni esse non, perferendis, nemo doloremque impedit eos nobis in distinctio sunt tempora laudantium? Veniam aliquid ex nemo quod!</p>
</div>

Попробуйте нажать на элемент p, чтобы увидеть анимацию.