网站动画元素在移动视图中消失

Question

我的一些元素是动画的，它们使用一些 JS 来检测何时被查看。

在桌面视图中它们工作正常，但在移动设备中它们完全消失，除了一个。

它们消失的原因是因为在它们的动画中它们滑动说

• -100% X 向左，不透明度为 0
• 然后移回 0 X 并将其不透明度设置为 1。

我不知道如何覆盖动画。这是

@media(width: 700px)

部分的代码（当它进入检查元素选项卡上的移动视图时它应该更改为什么）。 我想要设置动画的元素在 HTML 中被赋予“class=hidden”，然后在 CSS 中引用。当查看某些内容时，JS 会添加“show”类，并在不可见时将其删除。这意味着 .show 具有最终想要的位置，而 .hidden 和 .hidden2 只是它们动画的位置。

@media (max-width: 700px) {
  .hidden:nth-child(1) {
    transition: 0.75s;
    filter: blur(5px);
    transform: translateZ(-100%);
    opacity: 0;
  }
  .hidden:nth-child(2) {
    transition: 0.75s;
    filter: blur(5px);
    transform: translateZ(-100%);
    opacity: 0;
  }
  .hidden:nth-child(3) {
    transition: 0.75s;
    filter: blur(5px);
    transform: translateZ(-100%);
    opacity: 0;
  }
  /*This is the second round of images that animate. */
  .hidden2:nth-child(1) {
    transform: translateZ(-100%);
    opacity: 0;
    filter: blur(5px);
    transition: 1s;
  }
  .hidden2:nth-child(2) {
    transform: translateZ(-100%);
    opacity: 0;
    filter: blur(5px);
    transition: 1s;
    transition-delay: 150ms;
  }
  .hidden2:nth-child(3) {
    transform: translateZ(-100%);
    opacity: 0;
    filter: blur(5px);
    transition: 1s;
    transition-delay: 250ms;-100
  .show:nth-child(1) {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
    transform: translateZ(0);
    transform: translateY(0);
  }
  .show:nth-child(2) {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
    transform: translateZ(0);
    transform: translateY(0);
  }
  .show:nth-child(3) {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
    transform: translateZ(0);
    transform: translateY(0);
  }
}

观察它们的Javascript是：

const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
        console.log(entry)
        if (entry.isIntersecting) {
            entry.target.classList.add('show');
        } else {
            entry.target.classList.remove('show');
        }
    });
});
const hiddenElements = document.querySelectorAll(".hidden, .hidden2, .hidden3");
hiddenElements.forEach((el) => observer.observe(el));

以下是所展示的两组图像之一的 HTML。想要隐藏的项目被赋予“隐藏”类。

   <section class="showcase">
        <!--This is the title, above the images (Not part of them).-->
        <h1>What is it?</h1>
        <p>Create is a minecraft mod created by simibubi that allows you to make Contraptions,<br>
            and automate processes using Rotational Power/Stress Units.<br>
            It adds many mechanical components and block variants to the game.<br>
            Create is also a decoration mod. It adds a total of 550+ Blocks!</p>
        <div class="row">
            <!--This is for each image.-->
            <div class="showcase-col hidden">
                <img src="images/opengates.png">
                <div class="layer">
                    <!--The text at the bottom of the images.-->
                    <h3>THE GEARS<br>BEHIND IT ALL</h3>
                </div>
            </div>
            <div class="showcase-col hidden">
                <img src="images/industrial-1.png">
                <div class="layer">
                    <h3>THE INDUSTRIAL<br>ASPECTS</h3>
                </div>
            </div>
            <div class="showcase-col hidden">
                <img src="images/nature.png">
                <div class="layer">
                    <h3>THE NATURE</h3>
                </div>
            </div>
        </div>
    </section>

我的目标是将过渡更改为简单地从背景淡入而不是从侧面淡入，但我无法设法覆盖这些属性。顺便说一句，这位于之前的代码下方。

我尝试更改此媒体查询在 CSS 中的位置，但没有任何结果。我尝试重新定义媒体查询中的所有内容，以便它应该覆盖以前的代码，但事实并非如此。我期望这些项目会从虚空中淡入（从无到有，这将是“transform:translateZ(-100%);”，但这没有任何作用。

总之，我想知道我的代码中是否存在任何缺陷，以及如何覆盖动画语句，因为它们当前未被覆盖。

临时站点的链接是：“https://musical-bublanina-1b4315.netlify.app/” 可以在移动视图中查看和检查该站点以查看问题。

Answer 1

原来我需要做的就是创建一个媒体查询 @media(min-width:701) 并将第一段代码放入其中来解决这个问题。