从 DOM 中移除 CSS 动画

Question

我有以下 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>

现在我有一个可以删除任何 div 的javascript .product。
有没有办法将已删除的 div 从 DOM 右侧淡出并为其他 div 设置动画“向上移动到可用空间”？

Answer 1

一个简单的例子

代码笔演示

标记

<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>

CSS

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;
}

JS

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_container元素中：这会在元素上启动 CSS 过渡.product。

最后，当transitionend事件发生在单个产品元素上时，只需从 DOM 中删除所有产品。

Answer 2

您可以在 CSS 中使用 css 过渡。删除的部分对您来说可能会有所不同。请单击该产品将其删除。

let productsRy = Array.from(document.querySelectorAll(".product"));


productsRy.forEach((p,i)=>{
  p.style.top = i * (3 + 1) * 16 +"px";
  p.addEventListener("click",()=>{
  container.removeChild(p);
  productsRy = Array.from(document.querySelectorAll(".product"));
  productsRy.forEach((p1,i1)=>{p1.style.top = i1 * (3 + 1) * 16 +"px";})
})
  
  
})

.products-container{position:relative;}

.product{
  position:absolute;
  padding:1em; 
  margin:.5em;
  height:3em;
  outline:1px solid; width:200px;
  height:auto;
  transition: all 1s;
}
}

<div class="products-container" id="container">
  <div class="product"  data-id-product="a" data-id-product-attribute="a">
  product a
  </div>
    <div class="product"  data-id-product="b" data-id-product-attribute="b">
  product b
  </div>
    <div class="product"  data-id-product="c" data-id-product-attribute="c">
  product c
  </div>
</div>