JavaScript + CSS3 动画不能正常工作？

Question

我目前正在编写一个名为 quickly.js 的库。有conceal(milliseconds) 和display() 函数，它们具有通过CSS 编程的动画。隐藏功能动画正常工作，但显示功能动画不能正常工作。它不会淡入。相反，它突然出现。这是一个演示错误的 JSFiddle：https://jsfiddle.net/v6esmqtf/6/。

Answer 1

您根本没有设置display 函数。

Element.prototype.conceal = function(ms) {
  ms = ms || 0;
  var thisStyle = this.style;
  thisStyle.opacity = 0;
  setTimeout(function() {
    thisStyle.display = "none";
  }, ms);
};

Element.prototype.display = function(ms) {
  ms = ms || 0;
  var thisStyle = this.style;
  thisStyle.display = "";
  setTimeout(function() {
    thisStyle.opacity = 1;
  }, ms);
};

然后……

document.getElementById("conceal").onclick = function() {
  document.getElementById("get").conceal(800);
};

document.getElementById("display").onclick = function() {
  document.getElementById("get").display(0);
};

希望这会有所帮助。