动画父删除子项

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 sightcartItem.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元素以查看动画。