JavaScript + CSS3 Animationen funktionieren nicht richtig?

Question

Ich programmiere gerade eine Bibliothek namens quickly.js. Es gibt conceal(milliseconds) und display() Funktionen, die Animationen haben, die über CSS programmiert werden. Die Maskierungsfunktionsanimation funktioniert ordnungsgemäß, aber die Animation der Anzeigefunktion funktioniert nicht korrekt. Es verblasst nicht. Stattdessen erscheint es abrupt. Hier ist ein JSFiddle, der den Fehler demonstriert: https://jsfiddle.net/v6esmqtf/6/.

Answer 1

Sie hatten einfach nicht die display Funktion eingerichtet.

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

Und dann ...

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

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

Hoffnung, das hilft.