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

Question

基本上我想做的是为 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>

Answer 1

像上面要求的那样，只需更改 class 并将 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>

Answer 2

这似乎是一个特异性问题。修复它的方法是将 .fade--in class 从锚标记移动到范围 .btn-container元素。我已经在这个答案的片段中添加了更新的代码。感谢@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>

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

Lost translateY(-3px) after adding JS (appearOnScroll)

html

javascript

css

css-transitions