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);
};

希望这对您有所帮助。