Is there a way in javascript to position divs with rotations without using transitions initially for an animation that will be triggered later by css transition? I have tried a codepen example which unfortunately does not work on the platform but works fine locally due to window.onload not being considered. Here is the link to my codepen: http://codepen.io/3MO/pen/ZLoKbv
In my approach, I do not set any transition attributes for the divs at first. I transform the divs based on the digit clicked and then add a class to activate the transition properties after this initial positioning.
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 start transitions...
}
.active-transition {
transition: 0.5s;
}
The issue arises when setting the initial positions of the divs taking into account the transition properties even though they are defined after. Can anyone suggest a proper method to disable the transition during the initial positioning and activate it afterwards so that the initial positioning does not use the transition effect?
Your help would be greatly appreciated! Thank you.