Curtain goes up after clicking 2nd x button 1 time

HTML & CSS
1

The 2nd video needs to be hidden.

If I unhide: .video-containerB.hide,

The curtain does not go up after clicking the 1st exit button here.

https://jsfiddle.net/6xavobs7/

.outer-containerA.hide,
.video-containerA.hide,
/*.video-containerB.hide,*/
.containerB.hide,
.outer-container.hide,
.containerC.hide {
  display: none;
}

939×333 146 KB

Also:

The video to the 2nd x button is not visible?

It’s clickable and the video plays though.

Why?

747×325 1.61 KB

3

At the code here: https://jsfiddle.net/7q5rvts6/3/

How to I keep .video-containerB hidden while keeping the code working as it is?

It shouldn’t appear on the screen until after the first x button is clicked.

Right now it is this:

.outer-containerA.hide,
.video-containerA.hide,
/*.video-containerB.hide,*/
.containerB.hide,
.outer-container.hide,
.containerC.hide {
  display: none;
}

If I do this, the curtain to the 2nd video does not appear on the screen as it should.

Seen here: https://jsfiddle.net/b0ave9wr/

.outer-containerA.hide,
.video-containerA.hide,
.video-containerB.hide,
.containerB.hide,
.outer-container.hide,
.containerC.hide {
  display: none;
}
4

That’s because you have set .wrap to opacity:0 and you never change it.

it looks like you are adding a slide class so you could do this:

.video-containerB.slide .wrap{
  opacity:1;  
}
1 Like
6

The curtain is not going up after clicking the x button.

How do I have it go up?

The curtain just stays stationary after clicking the x button.

code: https://jsfiddle.net/xj3014e9/1/

.video-containerA.slide .curtain,
.hide .video-containerB.slide .curtain  {
  transition: 8s;
  transition-delay: 700ms;
  transform: translateY(-100%);
}

I tried:

.hide .video-containerB.slide .curtain {

.hide.video-containerB.slide .curtain {

.hide + .video-containerB.slide .curtain {

.hide ++ .video-containerB.slide .curtain {

Transition can’t work on the 2nd curtain, correct, only animation?

Am I right about that, or not?

I could possibly be wrong about that, I am not sure.

Using Animation works here:

Here it is working using animation.

https://jsfiddle.net/gs4nqc5d/3/

@keyframes slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
/*.video-containerA.slide .curtain,*/ 
.video-containerB.slide .curtain {
  animation: slide 8s forwards;
  animation-delay: 700ms;
}
7

A transition can only work when there is a change from one state to another. If the element is initially hidden with display: none and then subsequently revealed then the only styles that are in force are the ones shown when it is displayed. There is no transition! It just starts at the new position. Any position it had at display: none is irrelevant as far as a transition is concerned. It only sees the new styles and there is no transition

I’ve explained this to you over and over again. For a transition to be viable the element needs to displayed on the screen (or out of sight but not display: none) then you could add a class at some point after that and a transition could occur. Think of it like a hover effect. The element is in view and then when you hover you change something so that can cause the transition from one state to another.

Animation on the other hand works by animating from one value to another (or multiples) explicitly.

Had your element been hidden off screen (or some other method) then the transition could be made to work and from the html you have this would be the path.

.hide + .video-containerB.slide .curtain {etc...}

1 Like
8

I have it figured out:

https://jsfiddle.net/cj841bpL/2/

js

  const container = document.querySelector(".video-containerA");
  container.classList.add("slide");

  const exitButton = document.querySelector(".exitA");
  container.addEventListener("transitionend", function() {
    exitButton.classList.add("visible");
  });
};


function showExit(containerSelector, exitSelector) {
    const container = document.querySelector(containerSelector);
    const exitButton = document.querySelector(exitSelector);
    container.classList.remove("hide");
    container.classList.add("slide");
    container.addEventListener("animationend", function() {
      exitButton.classList.add("visible");
    });
  }


  function removePlayer() {
    videoPlayer.destroyPlayers();
  }

  function resetPage() {
    hideContainer(".video-containerA");
    // showContainer(".video-containerB");
    showExit(".video-containerB",".exitB");
    removePlayer();
  }

css

.video-containerA.slide .curtain {
  transition: 8s;
  transition-delay: 700ms;
  transform: translateY(-100%);
}


@keyframes slide {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

/* .video-containerA.slide .curtain, */
.video-containerB.slide .curtain {
  animation: slide 8s forwards;
  animation-delay: 700ms;
}
1 Like
9

I want to create one example. https://jsfiddle.net/pyq2mrfu/1/

Where display: none; is not used here.

Will this even work?

I have this here:


.hide + .video-containerB.slide .curtain,
.hide + .video-containerC.slide .curtain {
  transition: 8s ease-in-out;
  transition-delay: 2.2s;
  transform: translateY(-100%);
}

.video-containerB.hide,
.video-containerC.hide{
  display: none;
}
10

You know how to hide things without display: none so I don’t really know what you are asking for?

.video-containerB.hide,
.video-containerC.hide{
  display: block;/* only needed if you have display:none  defined elsewhere*/
  visibility:hidden;
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  left:-100vw;
}

Or one of a number of methods depending on criteria required.

Also why are you still doing things like this?

.outer-containerA.hide,
.video-containerA.hide,
.outer-containerB.hide,
.containerB.hide,
.containerC.hide {
  display: none;
}

This would have sufficed for all:

.hide {
  display: none;
}
11

Thank you for this:

.hide {
  display: none;
}

I change my code a lot, maybe it would be good to keep it the other way for my benefit.