CSSアニメーションで「opacity: 0」と「display: none;」を適用したサンプル

• ✖
• ✖
• ✖
• ✖

<ul class="cards">
  <li class="card">
    <button class="delete-btn">✖</button>
  </li>
  <li class="card">
    <button class="delete-btn">✖</button>
  </li>
  <li class="card">
    <button class="delete-btn">✖</button>
  </li>
  <li class="card">
    <button class="delete-btn">✖</button>
  </li>
</ul>

.fade-out {
    animation: fade-out 0.25s forwards;
  }

  @keyframes fade-out {
    100% {
      opacity: 0;
      display: none;
    }
  }

  img {
    width: 100%;
  }

  .cards {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
  }

  .card {
    display: block;
    aspect-ratio: 1/1;
    width: 100%;
    background: tan;
    position: relative;
    border-radius: 1rem;
    max-width: 200px;
  }

  .card:nth-child(2) {
    background: khaki;
  }

  .card:nth-child(3) {
    background: thistle;
  }

  .card:nth-child(4) {
    background: wheat;
  }

  .delete-btn {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 3rem;
    height: 3rem;
    border: 4px solid;
    border-radius: 100%;
    background: steelblue;
    color: white;
    font-size: 2rem;
    text-align: center;
    cursor: pointer;
  }

const deleteBtn = document.querySelectorAll('.delete-btn')
deleteBtn.forEach((btn) => {
  btn.addEventListener('click', () => {
    btn.parentElement.classList.add('fade-out')
  })
})

元記事を表示する