css transition doesn't work if element start hidden

Question

I have 2 divs, one of them is hidden via display:none;. Both have the same css transition on the property right.

If I change t

Answer 1

Personally I would check to see if the element is visible after making it show. Then continue on through the jQuery.

Like this: https://jsfiddle.net/789su6xb/

$('button').on('click',function(){

    var b = $('.b');
    b.show();

    if(b.is(":visible")) {
        $('.b').css('right','80%');
        $('.a').css('right','80%');
    }

});