具有 css 转换的 ToggleClass

Question

如果 div 的滚动位置大于 200，我得到了这个简单的 js 来切换 class。着色 class 有一个过渡：1s；属性，但效果仅在应用 class 时运行，而不是在删除状态下运行。我知道当 js 删除 class 时，不再有过渡，那么我如何重构它以便按我想要的方式工作？

$(".one").scroll(function() {
  let position = $(".one").scrollTop();
  if (position > 200) {
    $(".two").toggleClass("colorize", true);
  } else {
    $(".two").toggleClass("colorize", false);
  }
});

.colorize {
   background-color: red;
   transition: 1s;
}

Answer 1

您正在 .colorize class 中声明转换。当您从元素中删除 class 时，当然该元素将不再应用这些指令。

为了始终在元素上保持过渡，您必须在始终应用的选择器中应用它。

只需创建这个：

.two {
   transition: 1s;
}

然后，将您的 colorize class 更改为：

.colorize {
   background-color: red;
}

具有 css 转换的 ToggleClass

ToggleClass with css transition

javascript

css

jquery

effect