CODEWITHSUNDEEP
javascriptjquerycssanimation
Chet
Chet

Reputation: 19849

Transition translate animation immediately after display block

I'm trying to animate a page transition by changing CSS with Javascript (jQuery). I have two pages, and one is set to display none to start.

page1 = $('.page1');
page2 = $('.page2');

page1.removeClass('animate').css('display', 'block').css('transform','translate3d(0,0,0)');
page2.removeClass('animate').css('display', 'none').css('transform','translate3d(0,0,0)');

Then I move page2 to the right without animating and display block.

page2.removeClass('animate')
  .css('display', 'block')  
  .css('transform','translate3d(100px,0,0)');

Immediately after, I animate a translation over page1.

page2
    .addClass('animate')
    .css('transform','translate3d(0px,0,0)');

The problem here is that if I do both these animations one after the other, theres no animation. But if I wait briefly between the two it works just fine.

http://codepen.io/anon/pen/myeopr

Upvotes: 0

Views: 962

Answers (1)

Chet
Chet

Reputation: 19849

I found a solution by using setTimeout with no delay

page2.removeClass('animate')
  .css('display', 'block')  
  .css('transform','translate3d(100px,0,0)');

setTimeout(function() {
  page2
      .addClass('animate')
      .css('transform','translate3d(0px,0,0)');
}, 0)

Its totally a hack but it works...

Upvotes: 0

Related Questions