ファイル一覧の並び替え・削除アニメーション

<div class="d04-04-10-list">
          <div class="d04-04-10-row"><span class="d04-04-10-name">invoice.pdf</span><button class="d04-04-10-del" type="button" aria-label="削除"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div>
          <div class="d04-04-10-row"><span class="d04-04-10-name">avatar.png</span><button class="d04-04-10-del" type="button" aria-label="削除"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div>
          <div class="d04-04-10-row"><span class="d04-04-10-name">notes.docx</span><button class="d04-04-10-del" type="button" aria-label="削除"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div>
          <div class="d04-04-10-row"><span class="d04-04-10-name">chart.xlsx</span><button class="d04-04-10-del" type="button" aria-label="削除"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></button></div>
        </div>

.d04-04-10 .d04-04-10-list{width:100%;max-width:200px;display:flex;flex-direction:column}
        .d04-04-10 .d04-04-10-row{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;margin-bottom:6px;background:#f9fafb;border-radius:8px;overflow:hidden;max-height:34px;opacity:1;transition:max-height .35s ease,opacity .3s ease,margin .35s ease,padding .35s ease}
        .d04-04-10 .d04-04-10-row.removing{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0}
        .d04-04-10 .d04-04-10-name{font-size:11px;color:#374151}
        .d04-04-10 .d04-04-10-del{border:none;background:none;color:#9ca3af;cursor:pointer;padding:2px;display:flex}
        .d04-04-10 .d04-04-10-del:hover{color:#ef4444}

(function(){
          var root=document.currentScript.closest('.item');
          var list=root.querySelector('.d04-04-10-list');
          function remove(row){
            if(!row||row.classList.contains('removing'))return;
            row.classList.add('removing');
            setTimeout(function(){
              row.style.display='none';
              checkEmpty();
            },380);
          }
          function checkEmpty(){
            var rows=list.querySelectorAll('.d04-04-10-row');
            var remain=0;
            rows.forEach(function(r){ if(r.style.display!=='none') remain++; });
            if(remain===0){
              setTimeout(reset,1400);
            }
          }
          function reset(){
            list.querySelectorAll('.d04-04-10-row').forEach(function(r){
              r.classList.remove('removing');
              r.style.display='';
            });
          }
          list.querySelectorAll('.d04-04-10-del').forEach(function(btn){
            btn.addEventListener('click',function(){remove(btn.closest('.d04-04-10-row'));});
          });
          setInterval(function(){
            var rows=Array.prototype.filter.call(list.querySelectorAll('.d04-04-10-row'),function(r){return r.style.display!=='none' && !r.classList.contains('removing');});
            if(rows.length>0) remove(rows[0]);
          },1800);
        })();