0

In javascript I want to position divs with rotations without transitions to reach a starting position for an animation (made with css transition). So after this initial position, I want to enable the transition.

I did a codepen there: http://codepen.io/3MO/pen/ZLoKbv It seems the codepen does not work will it works on my local, the window.onload is not taken into account.

Anyway : - the divs don't have any transition attribues set. - I transform the divs, according to the digit clicked. - After that, I want to start transitions, so I add a class to the divs which defines the transition properties.

function onThumbnailClick(event) {
   var index = parseInt(event.target.id.split('-')[1]);

   //initialize the div position without transition :
   initPortraitPanel(index); 
   //then I "activate" the transition :
   $('.portraitDiv').addClass('active-transition'); 
   //After that I want to launch transitions...
}      

.active-transition {
      transition: 0.5s;
}

The problem is, the initial positioning of the divs takes the transition properties even if they are set after.

anybody can tell me a proper way to disable transition for an initial positioning, then activate the transition so this initial positioning doesn't use transition?

Thanks!

Joel
  • 669
  • 7
  • 25
  • You need to include jQuery to get the codepen example to work. In future if something isn't working look at the browser console before you do anything else ;) – Reinstate Monica Cellio Feb 03 '17 at 09:51
  • Thanks, I added it, so now it works. – Joel Feb 03 '17 at 09:55
  • Having a really difficult time understanding your question. Can you explain clearer what the problem is? – Serg Chernata Feb 03 '17 at 12:30
  • Have you checked my code? My divs don't have any transitions defined in their css classes. I want to 1) position them, using transform, so they have an initial position without transition. 2) activate transition by adding a class. The problem is, even without transition defined, a transition of 0.5s is second: in my code, I do the transformation in initPortraitPanel, and I add the class 'active-transition" AFTER, and it is still taken into account in the transformations applied BEFORE. – Joel Feb 03 '17 at 14:30
  • To be even more precise and direct: on my codepen, when clicking on 1, 2, 3 or 4, the divs should position themselves without transitions. How can I do that? – Joel Feb 03 '17 at 15:49

1 Answers1

1

Adding a timeout to the addClass :

function onThumbnailClick(event) {
    var index = parseInt(event.target.id.split('-')[1]);

    initPortraitPanel(index);
    $('.portraitDiv').setTimeout(addClass('active-transition'), 50);
}

codepen

Seems that this was already answered , downvoted, and deleted ... I don't know why

vals
  • 61,425
  • 11
  • 89
  • 138
  • @Kevin Jimenez Seems that you already knew the answer. Am I missing something ? – vals Feb 03 '17 at 21:28
  • adding a timeout seems a dirty solution, doesn't it? I mean, how do you set the duration? Empirical experience? But so it will depend on the browsers... It would be my last ditch hope solution. I was trying to find an event triggered when a position is reached, without transition, but it seems it does not exist – Joel Feb 03 '17 at 22:13
  • No, it isn't a dirty solution. It's the cleaner one. The amount of the timeout doesn't matter, and in most browsers can be 0. The key issue here is to allow a browser render between the 2 functions. (initPortraitPanel and adding the class) – vals Feb 04 '17 at 08:11
  • Ok thanks. Isn't it strange that the transition shows in the first place, while the initial positioning should be instantaneous? I don't understand the inner mechanism which explains the behavior I am trying to solve. – Joel Feb 04 '17 at 08:23
  • Looking to this issue, I have found a better answer to this same question. Look also at transistor09 answer, it is the other approach that can be taken (the dirtier one) – vals Feb 04 '17 at 08:34
  • Thanks a lot, so indeed it seems a normal behavior and timing is of the essence. – Joel Feb 04 '17 at 08:46