Question

我有一个简单的问题。我在同一个元素上运行 JS 时创建了一个 CSS 悬停过渡，它的 CSS 适用于悬停效果的第一部分，但是在你停止悬停在元素上的部分，它会立即改变，这会破坏过渡效果。（我显然希望它淡出）我通过删除 JS 来调试它并且它起作用了，但我想知道我是否可以在两者上使用它以使其看起来很棒。

这是我的脚本：

const scrollElements = document.querySelectorAll(".js-scroll");

const elementInView = (el, dividend = 1) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop <=
    (window.innerHeight || document.documentElement.clientHeight) / dividend
  );
};

const elementOutofView = (el) => {
  const elementTop = el.getBoundingClientRect().top;

  return (
    elementTop > (window.innerHeight || document.documentElement.clientHeight)
  );
};

const displayScrollElement = (element) => {
  element.classList.add("scrolled");
};

const hideScrollElement = (element) => {
  element.classList.remove("scrolled");
};

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    if (elementInView(el, 1.25)) {
      displayScrollElement(el);
    } else if (elementOutofView(el)) {
      hideScrollElement(el)
    }
  })
}

window.addEventListener("scroll", () => { 
  handleScrollAnimation();
});

.backgroundimg {
         background-color: rgb(77, 107, 153); 
         width: 100%;
         height: 200px;


.backgroundimg:hover {
         background-color: #555555;
         -webkit-transition: background-color 2000ms ease-out;
        -moz-transition: background-color 2000ms ease-out;
        -o-transition: background-color 2000ms ease-out;
        transition: background-color 2000ms ease-out;


 .scroll-container:nth-of-type(2) {
    background-color: rgb(77, 107, 153);;
    }

    .scroll-container:nth-of-type(even) {
    flex-direction: row-reverse;
    }

    .scroll-element {
    min-height: 300px;
    height: 600px;
    background-color: rgb(77, 107, 153);
    width: 100%;


    }

    @media screen and (max-width: 650px) {
    .scroll-container,
    .scroll-container:nth-of-type(even) {
    flex-direction: column;
    align-content: inherit;
    }


    }

    .js-scroll {
    opacity: 0;
    transition: opacity 500ms;
    }

    .js-scroll.scrolled {
    opacity: 1;
    }

    .scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
    }


    @keyframes fade-in-bottom {
    0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
    }
    100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    }
    }

<a id="aboutlink">
     <section class="backgroundimg scroll-element js-scroll fade-in-bottom">
     </a>
         <h1 class="textimg" style="margin: 95px 0px 0px 500px; font-weight: 500;">Welcome Test</h1>
         <p class="textimg" style="margin: 0; padding: 165px 150px 0px 150px;font-size: 24px;text-align: center;line-height: 36pt;">Test Test Test </p>
     </section>

JavaScript 干扰 CSS 悬停动画

0 个答案: