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

희망.