CSS過渡和javascript

Question

這是一種情況：我有一個隱藏的彈出窗口，想在單擊時使用javascript進行顯示，並使用CSS過渡對其進行動畫處理。

我注意到的是，如果我的彈出式處理程序如下所示，則它沒有過渡-它會立即閃爍。

$('.popup-link').on('click', function(){
    $('.popup').show().addClass('popup-visible');
});

但是，如果我添加一個超時-沒關系是1毫秒還是1000毫秒，那一切都很好。

$('.popup-link').on('click', function(){
    $('.popup').show();

    /* if we don't use the timeout it has no transition */

    window.setTimeout(function(){
       $('.popup').addClass('popup-visible');
    },1)    

});

jsfiddle鏈接在這里： https ://jsfiddle.net/ueggj9hu/

所以我在這里有兩個問題：為什么會發生這種情況，並且可以使用這種方法還是有一種更清潔的方法？

編輯：我不認為jQuery動畫函數為“更干凈”的方式，因為它比CSS動畫要慢。

Answer 1

小提琴網址： https : //jsfiddle.net/ueggj9hu/1/

這將起作用（無需計時器功能），只需將時間調整為您希望在中間顯示的時間即可：

 $('.popup-link').on('click', function(){
    $('.popup').show().animate({
        top: "50%",
        marginTop: "-100px",
        opacity: 1
    },2000);  
});

Answer 2

您需要做的就是刪除display: none; 從.popup ，然后使用jQuery添加類：

$('.popup-link').on('click', function(){
    $('.popup').addClass('popup-visible');  
});

小提琴： https : //jsfiddle.net/ueggj9hu/5/