css 在元素出现后添加动画时出现问题

cngwdvgl 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(163)

我有3个按钮，并有照片-IM按下按钮后，我应该看到照片（如果我点击按钮爱好者，我看到爱好者的照片等）。我的代码：

const headerbtn = document.querySelector(".portfolio-menu");
  const headerPhoto = document.querySelector(".portfolio-wrapper");
  const allPhoto = headerPhoto.querySelectorAll(".all");
  
  const changePhoto = (name) => {
    let elem = headerPhoto.querySelectorAll(name);

    allPhoto.forEach((x) => {
      x.classList.add("hidden");

      x.classList.remove("animated", "fadeIn");
    });
    no.style.display = "none";
    allBtn.forEach((x) => {
      x.classList.remove("active");
    });
    elem.forEach((x) => {
      x.classList.remove("hidden");

      x.classList.add("animated", "fadeIn");
    });
  };
  function changeAll() {
    allPhoto.forEach((x) => {
      x.classList.add("hidden");
      x.classList.remove("animated", "fadeIn")
    });
    allPhoto.forEach((x) => {
      x.classList.add("animated", "fadeIn");
      x.classList.remove("hidden");
    })}
  headerbtn.querySelector(".all").addEventListener("click", changeAll);
  headerbtn.querySelector(".lovers").addEventListener("click", () => {
    changePhoto(".lovers");
  });
  headerbtn.querySelector(".chef").addEventListener("click", () => {
    changePhoto(".chef");
  });
}});

隐藏类的值为display=block。因此，我按下类为“lovers”的按钮，我只看到情侣的照片，它们以动画形式出现，之后我按下类为“all”的按钮，我看到所有照片，但不是所有照片都有动画（照片“lovers”没有动画，但其他的都有，但我在changeAll()中添加了一个类动画，控制台日志显示给我，但仍然没有动画）。我再次按下“恋人”按钮-我看到了恋人的照片，但他们也没有动画。

css

来源：https://stackoverflow.com/questions/75606394/problem-with-adds-animation-after-the-element-has-appeared

1条答案

按热度按时间

jjhzyzn01#

您可以使用requestAnimationFrame或setTimeout来确保在删除类的时间和重新添加类的时间之间有一个刻度。
运行代码段并多次单击"全部显示"按钮：

const imgs = document.querySelectorAll("img");

function changeAll() {
  imgs.forEach((x, i) => {
    x.classList.remove("animated", "fadeIn");
    x.removeAttribute("style");
    x.style.animationDelay = `${i * 0.25}s`;
    window.requestAnimationFrame(() => {
      x.classList.add("animated", "fadeIn");
    });
  });
}

header {
  text-align: center;
  padding-block: 1rem;
}

main {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  margin: auto;
  width: max-content;
}

img {
  height: 10rem;
  width: 10rem;
  object-fit: cover;
  opacity: 0;
}

.animated {
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    scale: 0;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

<header>
  <button onclick="changeAll()">Show All</button>
</header>
<main>
  <img src="https://picsum.photos/id/237/600/900" alt="dog" />
  <img src="https://picsum.photos/id/0/600" alt="laptop" />
  <img src="https://picsum.photos/id/63/700/600" alt="coffee" />
  <img src="https://picsum.photos/id/70/900" alt="trees" />
  <img src="https://picsum.photos/id/112/800/500" alt="wheat" />
  <img src="https://picsum.photos/id/168/200/300" alt="rocks" />
  <img src="https://picsum.photos/id/400/800/400" alt="shrub" />
  <img src="https://picsum.photos/id/216/500/800" alt="path" />
</main>

赞(0）回复(0）举报 2023-03-05

我来回答

css 在元素出现后添加动画时出现问题

1条答案

相关问题

热门标签

最新问答