Bennett Bennett - 22 days ago 7
Javascript Question

JavaScript + CSS3 animations not working properly?

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

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.

Comments