添加 JS 后丢失 translateY(-3px) (appearOnScroll)答案

【问题标题】：Lost translateY(-3px) after adding JS (appearOnScroll)添加 JS 后丢失 translateY(-3px) (appearOnScroll)
【发布时间】：2021-05-05 13:08:54
【问题描述】：

基本上我要做的是设置 CTA 按钮的转换延迟，以便在用户访问着陆页时从底部淡入。我不得不使用它，因为我使用的是@keyframes，它导致按钮内的文本在按钮悬停时略微跳跃，它看起来不太好，所以我找到了这个解决方案，但现在我的按钮效果不再按预期工作。

它应该在悬停时平移 Y(-3px) 并在单击时平移 Y(1px)。添加 JS (appearOnScroll) 功能后，它不再向上移动。此外，我的过渡效果已恢复默认设置，也不再应用，我们将不胜感激。

const faders = document.querySelectorAll(".fade--in");

const appearOptions = {
  threshold: 1,
  rootMargin: "-200px 0px -300px 0px",
};

const appearOnScroll = new IntersectionObserver(function (
  enteries,
  appearOnScroll
) {
  enteries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return;
    } else {
      entry.target.classList.add("appear");
      appearOnScroll.unobserve(entry.target);
    }
  });
},
appearOptions);

faders.forEach((fader) => {
  appearOnScroll.observe(fader);
});

html {
  background: #f1f1f1;
  color: #2e2e2e;
  font-family: Arial;
}

span {
  display: grid;
  justify-content: center;
}

.btn-container {
  margin-top: 6.5rem;
  display: flex;
  justify-content: center;
}

.heading-primary--main {
  font-size: 120px;
}

.btn:link,
.btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: 30px;
  transition: all 0.25s;
  position: relative;
  width: fit-content;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.2);
}

.btn--white {
  background: white;
  color: grey;
  letter-spacing: 1.5px;
}

.fade--in {
  opacity: 0;
  transform: translateY(100%);
}

.fade--in.appear {
  transform: translateY(0);
  transition: transform 1s ease, opacity 1.5s ease;
  transition-delay: 0.5s;
  opacity: 1;
}

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Fade in Bottom</title>
  </head>
  <body>
    <header class="header">
      
      <div class="header__hero-text">
        <h1 class="heading-primary">
          <span class="heading-primary--main">Button</span>
          <span class="heading-primary--sub"><span>Lorem ipsum dolor sit</span>
        </h1>
          <span class="btn-container">
            <a href="#" class="btn btn--white fade--in">Button</a></span>
      </div>
    </header>
  </body>
</html>

【问题讨论】：

如果您将:hover 应用于添加了这些新类的元素.btn.fade--in.appear:hover，它将起作用，但是由于您设置了一些延迟，因此您需要对其进行修改。
@prettyInPink 我试过了，但也许我不明白什么，你能澄清一下你的意思是什么“但是因为你设置了一些延迟，你需要修改它。”如您所述，我将 :hover 添加到 .btn.fade--in.appear:hover 并且它不起作用。你能用一个例子告诉我你的意思吗？
不适合你？
我刚刚检查过，看起来当我运行 sn-p 时，按钮似乎向下“单击”，但速度极慢。此外，就过渡延迟而言，我希望它在文本之后稍晚出现，无论如何要解决这个问题？

标签： javascript html css css-transitions

【解决方案1】：

按照上面的要求，这样的事情只是更改了类并将transition-delay 设置为0s。

.btn.fade--in.appear:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
    transition-delay: 0s;
}

.btn.fade--in.appear:active {
    transform: translateY(-1px);
    box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.2);
    transition-delay: 0s;
}

const faders = document.querySelectorAll(".fade--in");

const appearOptions = {
  threshold: 1,
  rootMargin: "-200px 0px -300px 0px",
};

const appearOnScroll = new IntersectionObserver(function (
  enteries,
  appearOnScroll
) {
  enteries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return;
    } else {
      entry.target.classList.add("appear");
      appearOnScroll.unobserve(entry.target);
    }
  });
},
appearOptions);

faders.forEach((fader) => {
  appearOnScroll.observe(fader);
});

html {
  background: #f1f1f1;
  color: #2e2e2e;
  font-family: Arial;
}

span {
  display: grid;
  justify-content: center;
}

.btn-container {
  margin-top: 6.5rem;
  display: flex;
  justify-content: center;
}

.heading-primary--main {
  font-size: 120px;
}

.btn:link,
.btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: 30px;
  transition: all 0.25s;
  position: relative;
  width: fit-content;
}

.btn.fade--in.appear:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

.btn.fade--in.appear:active {
  transform: translateY(-1px);
  box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.2);
  transition-delay: 0s;
}

.btn--white {
  background: white;
  color: grey;
  letter-spacing: 1.5px;
}

.fade--in {
  opacity: 0;
  transform: translateY(100%);
}

.fade--in.appear {
  transform: translateY(0);
  transition: transform 1s ease, opacity 1.5s ease;
  transition-delay: 0.5s;
  opacity: 1;
}

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Fade in Bottom</title>
  </head>
  <body>
    <header class="header">
      
      <div class="header__hero-text">
        <h1 class="heading-primary">
          <span class="heading-primary--main">Button</span>
          <span class="heading-primary--sub"><span>Lorem ipsum dolor sit</span>
        </h1>
          <span class="btn-container">
            <a href="#" class="btn btn--white fade--in">Button</a></span>
      </div>
    </header>
  </body>
</html>

【讨论】：

【解决方案2】：

这似乎是一个特异性问题。修复它的方法是将 .fade--in 类从锚标记移动到 span .btn-container 元素。我已经在这个答案中添加了 sn-p 中的更新代码。感谢@prettyInPink 为我指明了正确的方向，非常感谢。

const faders = document.querySelectorAll(".fade--in");

const appearOptions = {
  threshold: 1,
  rootMargin: "-200px 0px -300px 0px",
};

const appearOnScroll = new IntersectionObserver(function (
  enteries,
  appearOnScroll
) {
  enteries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return;
    } else {
      entry.target.classList.add("appear");
      appearOnScroll.unobserve(entry.target);
    }
  });
},
appearOptions);

faders.forEach((fader) => {
  appearOnScroll.observe(fader);
});

html {
  background: #f1f1f1;
  color: #2e2e2e;
  font-family: Arial;
}

span {
  display: grid;
  justify-content: center;
}

.btn-container {
  margin-top: 6.5rem;
  display: flex;
  justify-content: center;
}

.heading-primary--main {
  font-size: 120px;
}

.btn:link,
.btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2.5rem;
  border-radius: 30px;
  transition: all 0.25s;
  position: relative;
  width: fit-content;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
}

.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.2);
}

.btn--white {
  background: white;
  color: grey;
  letter-spacing: 1.5px;
}

.fade--in {
  opacity: 0;
  transform: translateY(100%);
}

.fade--in.appear {
  transform: translateY(0);
  transition: transform 1s ease, opacity 1.5s ease;
  transition-delay: 0.5s;
  opacity: 1;
}

<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Fade in Bottom</title>
  </head>
  <body>
    <header class="header">
      
      <div class="header__hero-text">
        <h1 class="heading-primary">
          <span class="heading-primary--main">Button</span>
          <span class="heading-primary--sub"><span>Lorem ipsum dolor sit</span>
        </h1>
          <span class="btn-container fade--in">
            <a href="#" class="btn btn--white">Button</a></span>
      </div>
    </header>
  </body>
</html>

【讨论】：