Why in a Dynamically generated DIV the Transition time delay not working

HTML & CSS
1

He all,

We have a Dynamically created DIV which has a Time Delay of 2 Seconds on Opacity Transition.
The time delay works fine if the DIV is added to the page via standard DIV tags.
However if we add the DIV via Dynamically generated JavaScript, then the Transition delay will not work and the DIV will display instantly with Opacity = 1!

You can see the Opacity Transition working fine with regular DIV added, here:

With the Opacity Transition not working via Dynamically generated JavaScript, here:

So the DIV in question is: wc_2018
This is the DIV that is to go from Opacity 0 to 1 with time delay once the Football reaches the bottom corner of the image panel.

BTW, we use Tables in that page, so if you are offended by HTML Tables, please ignore this question or ignore the use of Tables and just answer the question if you can.

FYI, we want to go from regular added DIV to Dynamically generated DIV, because in regularly added the DIV is there and can be clicked on however it just has Opacity of 0 until the Ball reaches it, and it is better if the DIV was not there until the Ball reached it.

Much Thanks,

2

You need to trigger a re-flow to restart the animation.

Change the fade function to this:

function display_faded (action, div_id) {
	if (action == 'show') 	{
		void document.getElementById(div_id).offsetWidth;
		document.getElementById(div_id).style.opacity = 1;
	} else {
		document.getElementById(div_id).style.opacity = 0;
	}
}

You probably should have been using JS to just add and remove classes and then let css do its job. However you would probably still need to restart the animation.

This also assumes the image is pre-loaded otherwise you could get a delay where the image loads when you add it dynamically.

2 Likes
3

Paul,

That ideas works fine. We put it live FYI.
And FYI we added pre-load image function so those images are pre-loaded.
I am just wondering though, why is JS Screwing up in correctly displaying transition and we need:
void document.getElementById(div_id).offsetWidth;
and what does this exactly do? I think problem is that in JS all lines of a function are called at same time, but that still should result in Transition time effect!

Thanks

4

No you have created an element and then almost immediately applied an opacity of 1. There never was an element with opacity of zero so there is nothing to register a transition to or from.

Another way to fix it would be to delay the opacity setting.

e.g.

setTimeout(function(){ document.getElementById(div_id).style.opacity = 1;},0)

4 Likes
5

Ok, thanks again.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.