JavaScript + CSS3动画无法正常工作？

Question

I am currently programming a library called quickly.js . There are conceal(milliseconds) and display() functions, which have animations that are programmed through CSS. The conceal function animation is working correctly, but the display function animation does not work correctly. It does not fade in. Instead, it abruptly appears. Here is a JSFiddle demonstrating the bug: https://jsfiddle.net/v6esmqtf/6/ .

Answer 1

You simply didn't have the display function set up.

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

And then...

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

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

Hope this helps.