How to slide down wall on page load, then slide up wall on button click

[asasass]

Currently the transition for when the wall closes and opens is exactly the same.

Is there a way to set 2 different transitions, one for when the wall goes down, and one for when the wall goes up?

Is there a way for this to be improved?

code https://jsfiddle.net/0sfng5ow/

.video-one {
  top: -101%;
  /* for testing: fast */
  transition: all 10s ease-in 0s;
  transition-delay: 1s;
}

.video-one.closed {
  top: 0%;
}

let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
  // should be a frame while it's not closed for transition to work
  videoOne.classList.toggle('closed', true)
})

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    videoOne.classList.toggle('closed', false)
    showVideo(curtain);
    cover.dispatchEvent(new Event("afterClick"));
  }

How the code works is, on page load the wall comes down, then on button click the wall goes up.

My Improved Version: https://jsfiddle.net/6g25h9au/3/

This allows me to set 2 different transitions.

.video-one {
  top: -101%;
  /* for testing: fast */
  transition: all 10s ease-in 0s;
  transition-delay: 1s;
}

.video-one.slide {
  top: 0%;
}

.curtain.slide .video-one {
  transition-delay: 3s;
  transform: translateY(calc(-100% - 1px));
}

let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
  // should be a frame while it's not closed for transition to work
  videoOne.classList.add("slide");
})

.video-one {
  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 red;
  background-repeat: no-repeat;
  z-index: 0;
}

.video-one::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: url("https://via.placeholder.com/264x264");
  background-position: center;
  background-size: 41.25% 73.33%;
  background-repeat: no-repeat;
}

[PaulOB]

You seem to have made that miles harder than it needs to be.

You could just have a normal keyframe animation on load. No need for requestanimation or extra classes when you start.

Then just add the slide class when the play is clicked and run a different keyframe.

[asasass]

Can you show me how this is done please?

I seem to always make things more difficult than they need to, or aught to be.

[PaulOB]

Id do it like this and then you can add any animations you want on teh way up as required.

.video-one {
  top: 0;
  transform:translateY(calc(-100% - 1px));
  animation:curtainDown 10s ease-in 1s forwards;
}
@keyframes curtainDown{
  to{transform:translateY(0%);}
}
.curtain.slide .video-one {
  transform:translateY(0%);
  animation:curtainUp 8s ease-in 3s forwards;
}
@keyframes curtainUp {
  to{transform:translateY(calc(-100% - 1px));}
}

Then you can delete the requestanimatrion js below.

let videoOne = document.querySelector('.video-one')
requestAnimationFrame(() => {
  // should be a frame while it's not closed for transition to work
  videoOne.classList.toggle('closed', true)
})

[asasass]

After I added this in, the ticker box stopped fading in.

I don’t know what happened.

What seems to be the issue, and how would this be fixed or adjusted?

javascript transition on wall: ticker fades in
https://jsfiddle.net/01hrxLo4/1/

keyframes ticker does not fade in.
https://jsfiddle.net/3r2gv460/

.video-one {
  display: flex;
  align-items: flex-end;
}

.alert {
  transition: opacity 4s ease 0s;
  opacity: 0;
}

.video-one.slide .alert {
  opacity: 1;
  transition-delay: 10.5s;
}

.slide .video-one .alert {
  opacity: 0;
  transition: opacity 4s ease 0s;
}


.video-one {
  top: 0;
  transform: translateY(calc(-100% - 1px));
  animation: curtainDown 10s ease-in 1s forwards;
}

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

.curtain.slide .video-one {
  transform: translateY(0%);
  animation: curtainUp 8s ease-in 3s forwards;
}

@keyframes curtainUp {
  to {
    transform: translateY(calc(-100% - 1px));
  }
}

[asasass]

I was thinking maybe a z-index is missing.

That is why the ticker isn’t visible on the screen.

The css is exactly the same there, the only thing changed there was adding in the animation for the sliding door.

[PaulOB]

No there is no slide class on video-one so the ticker is invisible.

.video-one.slide .alert {
  opacity: 1;
  transition-delay: 10.5s;
}

[asasass]

In the ticker code with the @keyframes on the door, how do I have the ticker fade in and fade out when the button is clicked?

How it works in the javascript code?

Copying the css from the javascript code doesn’t work.

It was working in the javascript code, then when I removed it, the ticker stopped being visible on the screen.

It is on video here:

I don’t understand.

Still not visible on the screen.

.video-one.slide .alert {
  opacity: 1;
  transition-delay: 10.5s;
}

To have the ticker fade in I am supposed to do what?

I don’t understand.

[PaulOB]

@asasass

To have the ticker fade in I am supposed to do what?

You need to add a keyframe as you aren’t adding a class to trigger a transition at the start. Therefore use 2 animations to make things easier.

.alert {
  animation:alerton 10s ease forwards;
  opacity: 0;
}
/*
.video-one.slide .alert {
  opacity: 1;
  transition: opacity 4s ease 10.5s
}
*/
.slide .video-one .alert {
animation:alertoff 4s ease;
}

@keyframes alerton{
  0%{opacity:0;}
  80%{opacity:0;}
  100%{opacity:1;}
}
@keyframes alertoff{
  0%{opacity:1;}
  100%{opacity:0;}
}

[asasass]

If I wanted to make things more harder I would do something different?

That would mean using javascript, wouldn’t it?

[PaulOB]

More harder in what way?

What are you wanting to do?

[asasass]

I don’t know, there are other ways than using javascript?

What would be more harder than the animation code?

One animation could be used instead of 2?

There is a way to get transition to work?

[PaulOB]

For transitions to work something must change from one state to another. That’s why transitions cannot work on page load as nothing changes.

Key frames on the other hand just run and do what you told them and actually change properties to another value if required.

JavaScript is basically used to toggle classes so transitions can work or key frames can be activated or changed.

Transitions are limited but key frames are basically endless and can achieve multiple animations with complicated behaviors.

It all depends on context as to which is best for the job in hand.

Mixing a transition with a key frame is awkward because the key frame end value becomes the most important. If you have set opacity with a key frame then it’s best to unset it with a key frame also.