CSS动画从DOM中移除

我有以下HTML结构：

<div class="products-container">
    {foreach from=$cart.products item=product}
  <div class="product"     data-id-product="{$product.id_product}" data-id-product-attribute="{$product.id_product_attribute}">
   ...
  </div>
</div>

{foreach from=$cart.products item=product}
...

现在我有了一个javascript，它可以删除任何div

.product

有没有办法将删除的div淡出右侧的DOM，并设置其他div“向上移动到可用空间”的动画？

一个简单的例子

---

标记

<button type="button">Remove product/s</button>

<section class="products-container">
  <p>
     Some text here
  </p>

  <div class="product">Product</div>
  <div class="product">Product</div>

  <p>
     Some text here
  </p>

  <div class="product">Product</div>
</section>

JS

button {
  cursor: pointer; }

.products {
  overflow-x: hidden; }

.product {
  font-weight: bold;
  transition: transform 1.5s 0s, opacity 1.25s 0s;
  transform: translateX(0);
  opacity: 1;
}

.products--delete .product {
  transform: translateX(100vw);
  opacity: 0;
}

let btt = document.querySelector('button');
let products_cnt = document.querySelector('.products-container');
let products  = document.querySelectorAll('.product');

products[0].addEventListener('transitionend', function() {
  [...products].forEach((p) => p.parentNode.removeChild(p))
});

btt.addEventListener('click', function() {
  this.setAttribute('disabled', 'disabled');
  products_cnt.classList.add('products--delete');
});

---

说明：单击按钮时，类

.products--delete

将添加到

.products\u容器

元素中：这将在

.product

元素上启动CSS转换

---

最后，当单个产品元素上发生

transitionend

事件时，只需从DOM中删除所有产品。

您可以在css中使用css转换。删除的部分可能与您的不同。请单击该产品以将其删除

let productsRy=Array.from（document.querySelectorAll（“.product”）；
productsRy.forEach（（p，i）=>{
p、 style.top=i*（3+1）*16+“px”；
p、 addEventListener（“单击”，（）=>{
容器移除儿童（p）；
productsRy=Array.from（document.querySelectorAll（“.product”）；
productsRy.forEach（（p1，i1）=>{p1.style.top=i1*（3+1）*16+“px”；}）
})
})

.products容器{位置：相对；}
.产品{
位置：绝对位置；
填充：1em；
边缘：.5em；
高度：3em；
外形：1px实心；宽度：200px；
高度：自动；
过渡：所有1；
}
}

产品a
产品b
产品c

CSS实际上没有能力以与JavaScript相同的方式修改对象。你可以很容易地做到这一点

$(".product").fadeTo("slow", 0.00, function(){
    $(this).slideUp("slow", function() {
         $(this).remove();
    });
});

---

您可以将

不透明度设置为
0
，然后将
高度设置为
0
，并结合
溢出：隐藏
。最后，在
transitionend
上，从DOM中删除元素。