动画父删除子项

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++) {&nbsp; p[i].addEventListener("click", function(e) {&nbsp; &nbsp; myFunc(e);&nbsp; });}function myFunc(e) {&nbsp; e.target.innerHTML = '';&nbsp; e.target.style.maxHeight = '0px';&nbsp; e.target.style.padding = '0';}div {&nbsp; outline : 1px solid red;&nbsp; padding: 10px;}p {&nbsp; padding: 10px;&nbsp; max-height: 100px;&nbsp; background: #000;&nbsp; color: #fff;&nbsp; transition: all 0.2s linear;}<div id=div class=div>&nbsp; <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>&nbsp; <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元素以查看动画。