jquery - CSS transitions and javascript -

here's situation: i've got hidden popup, want show on click javascript , animate css transition.

what i've noticed if popup handler looks 1 below has no transition - flashes in immediately.

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

but if add timeout - doesnt matter 1 ms or 1000 ms it's good.

$('.popup-link').on('click', function(){     $('.popup').show();      /* if don't use timeout has no transition */      window.settimeout(function(){        $('.popup').addclass('popup-visible');     },1)      }); 

jsfiddle link here: https://jsfiddle.net/ueggj9hu/

so i've got 2 questions here: why happening , okay use method or there cleaner way?

edit: don't take jquery animate function 'cleaner' way because slower css animation.

fiddle url: https://jsfiddle.net/ueggj9hu/1/

this work (without need of timer function) adjust time needs want show in middle:

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