You aren’t adding a class of panelUp with js so you cannot change the transition as there is nothing to transition to. A transition occurs when a property is changed and then transitions between those 2 values.
The transitionend event listener you’re referring to is used to set the display property of the .splash-screen element to none once the transition ends. This is done to ensure that the splash screen doesn’t interfere with the rest of the page once it’s hidden.
Here’s what’s happening in your code:
When the page loads, the .splash-screen element is visible (opacity: 1).
The window.onload function adds the hide class to the .splash-screen element, which changes its opacity to 0 with a transition-delay of 1s.
Once the transition ends (i.e., the splash screen is fully transparent), the transitionend event is fired.
The event listener for transitionend then sets the display of the .splash-screen element to none, effectively removing it from the document flow.
If you remove the transitionend event listener, the splash screen will still become transparent due to the opacity: 0 style, but it will remain in the document flow because its display property won’t be changed to none. This could potentially cause issues with user interaction, as the splash screen could still receive clicks or other events, even though it’s invisible.
So, based on this explanation, it’s recommended to keep the transitionend event listener in your code. It ensures that the splash screen is properly removed from the document flow once it’s no longer visible. If you’re experiencing issues or have other requirements, please provide more details so I can give a more precise answer.
No its not working. It happens straight away. If your splash screen takes a while to load as on my slow system then your curtain is already raised by the time I see it.
That one is better as it uses transitionend so is waiting for each to be finished before it activates so the curtain doesn’t get raised until its needed to.
No it doesn’t need to be removed from the flow and the js is only setting it to display:none anyway; it does not remove the element. As long as the element is hidden and non clickable it is fine as it is.
My version needs none of your extra js so I don’t know why you are bothering with loads of line of complicated when one line of css does the trick.
Then your curtain is already raised by the time the animation has finished.
That doesn’t happen in my version and it waits until its all finished before raising the curtain.You can’t just set a delay on the other animation because you don’t know how long the page will take. Sometimes my page wouldn’t,'t load for 10 seconds or so and other times its instant (the joys of a slow connection)… This would be compounded when you have loads of videos on the page.
That’s not long enough for my page to load so its all happened by the time I see it. You are not getting the point that your splash screen is supposed to be in place to hide what’s loading underneath. You can’t guess it will take one second to load… That’s why you put it on the load event and that may be whatever it takes.
And as I already said in your other thread that misses the point that your videos are loaded by js so they won;t have loaded either and you should check for videos loading before you do anything which was how one of my versions was working when I mentioned it before.
That shows that they happen together where the transition end would wait until finished before doing the next thing.
You are going backwards now.
You removed the display:none from the js (so my css won’t work anyway without that) but more importantly that leaves the splash screen blocking the page below because you restored the pointer-events:none.
/* Add a delay of 1 seconds before the opacity changes to 0 */
pointer-events: none;/* should still be none*/
You need the display:none in the js for my css to work or you need to restore the pointer-events for your code to work.
Your last 20 posts have been going around in circles and getting worse as each turn when the problem was already solved satisfactorily.