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

希望這可以幫助。