Question

我正在尝试创建一个动画，该动画的标题最初在页面中可见，然后向下滚动时，触发标题逐渐消失，然后字幕立即消失。我有标题部分，但似乎无法顺利显示字幕。首先，我在“ visibility：hidden”有副标题，然后滚动并在javascript中将过渡添加到类中时，它突然突然忽略了我给它的transition属性。 Here is the fiddler我成立了。下面是分别用于使此动画起作用的javascript和CSS。当然，如果有任何更简单的方法可以实现这一目标，请随时告诉我。我一直在研究和尝试无济于事的任何建议或帮助，将不胜感激。

JavaScript

const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');

window.onscroll = function() {

  console.log("document element");
  console.log(document.documentElement.scrollTop);
  console.log("scrolling elemnent");

  if (window.scrollY > 0) {
    element.classList.add('fadeout');
    element2.classList.add('fadein');
    console.log("hello");
  }
}

.fadeout {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

.two {
  visibility: hidden;
}

#subtitle {
  transition: opacity 2s linear;
}

.fadein {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}

Answer 1

当前，当您将字幕淡入时，它处于完全不透明的状态（因为visibility属性未设置不透明性，只会使元素不可见）

在opacity:0; CSS中添加.two，以使其淡入。

更新了小提琴https://jsfiddle.net/s2cban6q（更改了CSS的第32行）

顺利通过javascript删除和添加类

1 个答案: