首頁猿問動畫父刪除子項(xiàng)

動畫父刪除子項(xiàng)

JavaScript

蝴蝶刀刀 2021-11-12 17:09:14

我有一個包含.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;}我有刪除購物車項(xiàng)目時執(zhí)行的 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);});所以我的購物車項(xiàng)目向右滑動，然后在此轉(zhuǎn)換結(jié)束時刪除。該問題是，當(dāng)車項(xiàng)目是從DOM刪除，有我的cartItemsContainer沒有高度的過渡我希望在移除孩子時平滑降低父高度，我該如何實(shí)現(xiàn)？

查看完整描述

1 回答

慕妹3242003

TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個贊

我做了一個快速可行的解決方案，您可以根據(jù)需要進(jìn)行調(diào)整：

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;

}

<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元素以查看動畫。

反對回復(fù) 2021-11-12