CSS transitions and javascript

Question

here's the situation: i've got a hidden popup, want to show it on click with javascript and animate it with css transition.

What i've noticed is that if my popup handler looks like this one below it has no transition - it flashes in immediately.

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

But if i add a timeout - doesnt matter is it 1 ms or 1000 ms then it's all good.

$('.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 link here: https://jsfiddle.net/ueggj9hu/

So i've got two questions here: why is that happening and is it okay to use this method or is there a cleaner way?

edit: i don't take jQuery animate function as 'cleaner' way because it is slower than css animation.

jsfiddle.net/ueggj9hu/4 you need like this..

TM Dinesh
– TM Dinesh

2015-08-03 09:05:40 +00:00
Commented Aug 3, 2015 at 9:05 — TM Dinesh
– TM Dinesh, Commented Aug 3, 2015 at 9:05

EugenSunic · Accepted Answer · 2015-08-03 09:02:16Z

1

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

This will work (without need of a timer function) just adjust your time to your needs you want it to show in the middle:

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

answered Aug 3, 2015 at 9:02

EugenSunic

13.8k15 gold badges68 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucian · Accepted Answer · 2015-08-03 09:05:21Z

0

All you need to do is to remove display: none; from .popup and then just add the class with jQuery:

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

Fiddle: https://jsfiddle.net/ueggj9hu/5/

answered Aug 3, 2015 at 9:05

Lucian

6443 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS transitions and javascript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related