将 jQuery 可见性和不透明度动画替换为纯 Javascript

Question

我正在尝试从一个旧网站中删除 jQuery，但我无法使用他们提供的动画。

我只能复制不透明度淡入淡出，但我似乎无法缓慢地转换可见性它只是变为 1 或 0，我怎样才能顺利地完成这两项工作？

$("#square").css({ opacity: 0.0, visibility: "visible" }).animate({ opacity: 1.0 }, 200);

$("#square").css({ opacity: 1.0, visibility: "hidden" }).animate({ opacity: 0.0 }, 200);

Answer 1

此处最简单（也是迄今为止性能最高）的选项是对动画使用 CSS。 JS 动画应该尽可能避免，因为它很慢而且没有硬件加速。

要执行 CSS 中的要求，要应用的关键规则是 transition。您可以使用它来控制要设置动画的属性、它们的延迟、执行时间等。更多信息请访问 MDN。

这是一个基本示例。请注意，JS 仅用于添加 class 来触发动画 - 它根本不控制动画。

let square = document.querySelector('#square');

document.querySelector('button').addEventListener('click', () => {
  square.classList.toggle('show');
});

#square {
  width: 200px;
  height: 200px;
  background-color: #C00;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}
#square.show {
  opacity: 1.0;
  visibility: visible;
}

<button>Toggle the square...</button>
<div id="square"></div>

Answer 2

在我看来，@RoryMcCrossan 的回答一语中的。我仍然不清楚的是：为什么我们需要设置 visibilty ？我复制并修改了他的代码片段并删除了其中对 visibility 的所有引用，它似乎以同样的方式工作。我错过了什么？真的是多余的吗？

let square = document.querySelector('#square');

document.querySelector('button').addEventListener('click', () => {
  square.classList.toggle('show');
});

#square {
  width: 200px;
  height: 200px;
  background-color: #C00;
  opacity: 0;
  transition: 1s;
}
#square.show {
  opacity: 1.0;
}

<button>Toggle the square...</button>
<div id="square"></div>

将 jQuery 可见性和不透明度动画替换为纯 Javascript

Replace jQuery visibility and opacity animation with pure Javascript

javascript

css

jquery