How to get to .container3

The problem that I am having is that, clicking on the 2nd exit button should take me to .container3.

The 2nd exit button appears after clicking on the 1st exit button.

I am able to get from .container1. to .container2, but I can’t seem to get from .container2 to .container3.

Code I am working On: https://jsfiddle.net/pzn98Lw6/

Here is a demo code: https://jsfiddle.net/h5vkt3br/

You can see how it works in there.

What is supposed to occur in the code I am working on is, after clicking on the 2nd exit button it’s supposed to take me to .container3 and it is not doing that.

Clicking on the exit button initiates the “initial-fade” after clicking the exit button the first time.

After clicking the exit button a 2nd time, I’m thinking that would need to occur again.

I am not exactly sure what would be adjusted in the code for it to be working properly.

Am I needing another animationend in the code?
body.addEventListener("animationend", animationEndHandler);

<div class="container1"></div>
<div class="container2"></div>
<div class="container3"></div>

When I click on the 2nd exit button, nothing is occurring.

Nothing is happening when I click on the 2nd exit button.

Why is nothing occurring, and how is that fixed so that, clicking on the 2nd exit button takes you to .container3?

How am I able to exit .container2

The same way I was able to exit .container1?

CSS

.bg1 .container1 {
  display: none;
}

.container2 {
  display: none;
}

.bg1 .container2 {
  display: flex;
}

.container3 {
  display: none;
}

.bg2 .container3 {
  display: flex;
}

body.initial-fade {
  animation: initial-fade 1s ease forwards;
}

@keyframes initial-fade {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    pointer-events: none;
  }
}

body.bg1 {
  animation: bg1 5s ease 0s forwards;
}

@keyframes bg1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    background: teal;
  }
}

body.bg2 {
  animation: bg2 5s ease 0s forwards;
}

@keyframes bg2 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    background: teal;
  }
}

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