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 .product的JavaScript。
有没有一种方法可以将删除的div从DOM中淡出到右侧，并为其他div赋予“向上移动到可用空间”的动画效果？

Answer 1

一个简单的例子

Codepen demo

标记

<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元素：这将启动.product元素上的CSS过渡。

最后，当在单个产品元素上发生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>

Answer 3

CSS确实没有以与JavaScript相同的方式修改对象的能力。您可以轻松做到这一点。

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

CSS动画从DOM中删除

3 个答案: