I want to add a curtain that goes up over the player

[asasass]

The code here: https://jsfiddle.net/neyrcxko/1/

It would start off down than go up:

I want to convert it to use transition.

I just did that here: https://jsfiddle.net/wbgfant7/

That one uses animation, now I want to convert it to use transition.

That is where I am stuck.

.modal-content .panel {
  transform: translateY(0%);
  animation: curtainUp 8s ease-in forwards 1s;
}

.modal-content .panelUp {
  transform: translateY(calc(-100% - 1px));
}

window.onload = function() {
  const panel = document.querySelector('.panelUp');
  //panel.classList.add('hide');
  panel.addEventListener('transitionend', function() {
    panel.style.display = 'none';
  });
};

[PaulOB]

@asasass

That is where I am stuck.

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.

e.g. if you hovered and said this:

.modal-content .panel:hover {
  transform: translateY(calc(-100% - 1px));
}

The element would move so in your case you would need js to add the panelUp class after the splash screen had finished so that you have a change.

With animation you can just tell it to animate from one position to another but you can’t do that with a transition unless there is a change triggered to the property.

You could however use the dynamic class on the s[plash screen that is added dynamically in combination with the :has selector and do this.

.modal-content .panel {
  transform: translateY(0%);
  transition:8s ease;
  /*animation: curtainUp 8s ease-in forwards 1*/;
}

body:has(.splash-screen.hide[style]) .modal-content .panel {
  transform: translateY(calc(-100% - 1px));
}

It’s a bit of a mouthful but works in modern browsers.

[asasass]

I’m trying to figure this out, I’m stuck. https://jsfiddle.net/e8rfcs1u/2/

I can use slide again, right?

<div class="panel slide"></div>

.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    background:
      repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
    background-color: #222;
    border-bottom: 2px solid #191919;
    background-repeat: no-repeat;
    z-index: 0;
    overflow: hidden;
 

  }

  .modal-content .panel {
    transform: translateY(0%);
    transition: 8s ease;
  }

   .modal-content .panel.slide {
    transition-delay: 1s;
    transform: translateY(calc(-100% - 1px));
  }

window.onload = function() {
  var panel = document.querySelector('.panel');
  panel.classList.add('slide');
};

[PaulOB]

No you can’t just add a class on load as that just becomes the initial state and there won’t be a transition.

You would have to add the class after the page has loaded such as when your splashscreen disappears or after some period of time.

The code I gave you is working so you don’t need extra js.

[asasass]

I figured it out: https://jsfiddle.net/uc6vm1wb/10/

  .panel.slide {
    transition-delay: 2s;
    transform: translateY(calc(-100% - 1px));
  }

window.onload = function() {
  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');
  splashScreen.addEventListener('transitionend', function() {
    splashScreen.style.display = 'none';
  });

  const panel = document.querySelector('.panel');
  panel.classList.add('slide');
};

Is there a need for:

splashScreen.addEventListener('transitionend', function() {

It seems to work without that.

css:

 .splash-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    inset: 0 0 0 0;
    background: black;
    opacity: 1;
    /* Set transition duration to 1 seconds */
    pointer-events: none;
    /*dissable mouse clicking */
    cursor: default;
  }

  .splash-screen.hide {
   opacity: 0;
    transition-delay: 1s;
    /* Add a delay of 1 seconds before the opacity changes to 0 */
    pointer-events: auto;
    /* Re-enable mouse clicking after 1 seconds */
    cursor: default;
  }

javascript: https://jsfiddle.net/uc6vm1wb/12/

window.onload = function() {
  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');
  splashScreen.addEventListener('transitionend', function() {
    splashScreen.style.display = 'none';
  });

From AI:

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:

1. When the page loads, the .splash-screen element is visible (opacity: 1).
2. 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.
3. Once the transition ends (i.e., the splash screen is fully transparent), the transitionend event is fired.
4. 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.

[asasass]

This way works also: https://jsfiddle.net/uc6vm1wb/16/

window.onload = function() {
  function addTransitionEndListener(element) {
    element.addEventListener('transitionend', function() {
      element.style.display = 'none';
    });
  }

  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');
  addTransitionEndListener(splashScreen);

  const panel = document.querySelector('.panel');
  panel.classList.add('slide');
  addTransitionEndListener(panel);
};

[asasass]

body:has(.splash-screen.hide[style]) .modal-content .panel {
  transform: translateY(calc(-100% - 1px));
}

Doesn’t it also need to be removed from the dom, and isn’t that what the js does?

[PaulOB]

@asasass

Is there a need for:

splashScreen.addEventListener('transitionend', function() {

It seems to work without that.

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.

@asasass

This way works also: https://jsfiddle.net/uc6vm1wb/16/

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.

@asasass

body:has(.splash-screen.hide[style]) .modal-content .panel {
  transform: translateY(calc(-100% - 1px));
}

Doesn’t it also need to be removed from the dom, and isn’t that what the js does?

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.

[PaulOB]

@PaulOB

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

Actually that one is broken also because if you add a delay to the splash screen to mimic a slow loading page.

  .splash-screen.hide {
    opacity: 0;
    transition-delay: 8s;
etc...

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.

[asasass]

I’m not delaying it 8s though, only 1.

[PaulOB]

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.

[asasass]

Your code here doesn’t work without transition end:

https://jsfiddle.net/06arwvmj/1/

  body:has(.splash-screen.hide[style]) .modal-content .panel {
    transition-delay: 4s;
    transform: translateY(calc(-100% - 1px));
  }

window.onload = function() {
  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');
 // splashScreen.addEventListener('transitionend', function() {
  //  splashScreen.style.display = 'none';
  //});
}

[PaulOB]

@asasass

Your code here doesn’t work without transition enf:

The transitioned end is needed for the splashscreen!!!

We are talking about the curtain.

My css ties into the fact that the splashscreen ends and then the JS adds a style attribute into the html which my css is using as a trigger.

I never said change anything to the splashscreen js. It was your additional panel js that was not needed.

[asasass]

It’s needed for the .panel, not the .splashscreen.

This way works: Without: addTransitionEndListener

https://jsfiddle.net/06arwvmj/3/

window.onload = function() {
  //function addTransitionEndListener(element) {
  //element.addEventListener('transitionend', function() {
  //element.style.display = 'none';
  //  });
  // }
  
  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');

  const panel = document.querySelector('.panel');
  panel.classList.add('slide');
  // addTransitionEndListener(panel); // Only add listener to panel
};

[PaulOB]

You talk in riddles.

The JS is needed for the splash screen only.

My css is for the panel and needs no extra js.

[asasass]

The video is not clickable. https://jsfiddle.net/06arwvmj/3/

Modal is not clickable either.

What did I do, how do I fix that?

[asasass]

transitionend is needed for the splash screen: https://jsfiddle.net/t4h91unj/1/

or else transition-delay: 3s; does not work.

  .splash-screen.hide {
    opacity: 0;
    transition-delay: 3s;
    /* Add a delay of 1 seconds before the opacity changes to 0 */
    pointer-events: auto;
    /* Re-enable mouse clicking after 1 seconds */
    cursor: default;
  }

window.onload = function() {
  function addTransitionEndListener(element) {
    element.addEventListener('transitionend', function() {
      element.style.display = 'none';
    });
  }

  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');
  addTransitionEndListener(splashScreen);

  const panel = document.querySelector('.panel');
  panel.classList.add('slide');

};

[PaulOB]

@asasass

This way works: Without: addTransitionEndListener

Not really.

It appears to work but both are happening at the same time which you don;t seem to understand the difference.

If you add a duration to the splash screen you can see that the curtain is already moving.

  .splash-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 1;
    inset: 0 0 0 0;
    background: black;
    opacity: 1;
    /* Set transition duration to 1 seconds */
    pointer-events: none;
    /*dissable mouse clicking */
    cursor: default;
    transition:6s ease;
  }

That shows that they happen together where the transition end would wait until finished before doing the next thing.

@asasass

Modal is not clickable either.

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.

  .splash-screen.hide {
    opacity: 0;
    transition-delay: 1s;
    /* Add a delay of 1 seconds before the opacity changes to 0 */
    pointer-events: none;/* should still be none*/
etc...

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.

[asasass]

After doing that, how do I prevent youtube from being clicked?

https://jsfiddle.net/q1rvjh7t/1/

I am still able to click modal while the splash screen is up.

How do you prevent that?

Click on the splash screen while it is up.

Can I apply hide to this: .modal.open.hide {

Then unhide it after .splash-screen is not visible?

From here: https://jsfiddle.net/zr9gqjs6/

After I did that, how do I have it become unhidden?

I can’t figure out how to do that.

What I would want to do is keep the modal hidden until after the .splash-screen is hidden.

Until after .splash-screen transition is done.

Keeping modal hidden prevent it from being clicked.

Is that something that can be done in the code?

[asasass]

I figured this out. https://jsfiddle.net/fkg5av1n/6/

Unhideng the blog pager after both the splash-screen and .panel slide transition are done:

window.onload = function() {
  const splashScreen = document.querySelector('.splash-screen');
  const panel = document.querySelector('.panel');
  const blogPager = document.querySelector('.blog-pager');

  splashScreen.classList.add('hide');
  splashScreen.addEventListener('transitionend', function() {
    splashScreen.style.display = 'none';

    panel.classList.add('slide');
    panel.addEventListener('transitionend', function() {
      panel.style.display = 'none';

      blogPager.classList.remove('hide');
    });
  });
}

This would be improved I think: https://jsfiddle.net/fkg5av1n/10/

window.onload = function() {
  const splashScreen = document.querySelector('.splash-screen');
  splashScreen.classList.add('hide');

  const panel = document.querySelector('.panel');
  panel.classList.add('slide');

  panel.addEventListener('transitionend', function() {
    panel.style.display = 'none';
    const blogPager = document.querySelector('.blog-pager');
    blogPager.classList.remove('hide');
  });

}