The play button image hides when I click it, how do I also have the green image hide?

That is all I am trying to do in the code.

Hide the green image after the play image is clicked.

Currently only the play image hides, how to I have the green image hide aftr the play image is clicked?

javascript

const manageCover = (function makeManageCover() {
  const events = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function fadeVideoIn(cover) {
    hide(cover);
    const videoWrapper = document.querySelector(".video-wrapper");
    videoWrapper.classList.add("slide");
    return videoWrapper;
  }

  function showVideo(videoWrapper) {
    const thewrap = videoWrapper.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const videoWrapper = fadeVideoIn(cover);
    showVideo(videoWrapper);
    cover.dispatchEvent(events.afterClickCover);
  }

  function init(callback) {
    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
    events.afterClickCover = new Event("afterClickCover");
    cover.addEventListener("afterClickCover", callback);
  }

  return {
    init
  };
}());

CodePudding user response：

maybe you can try add background: unset; to .video-wrapper.slide::after class

CodePudding user response：

for your issue, it is easier to make the green background with the button as the same component.

The reason why the green background doesn't get away: It is set up as a pseudo-class under video-wrapper In my experience, javascript can't reach a pseudo-class, even if it is possible, it will make your code super messy and hard to read and follow.

Suggestion: Remove the green background from the video wrapper class and move it to the button. See here

HTML

<div >
    <div >
        <div >
            <div >
                <div ></div>
            </div>
        </div>
    </div>
  <div >
    <button type="button" aria-label="Open"></button>  
  </div>
</div>

CSS

.play {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.play button {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: 9px solid;
  background: transparent;
  filter: drop-shadow(3px 3px 3px #000000b3);
  animation: rotate 700ms linear forwards;
  border-color: red transparent red transparent;
}

.play::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border: 1px solid #333;
  pointer-events: none;
  background: url(https://i.imgur.com/ShS6nAO.png) no-repeat;
  background-size: contain;
  background-position: center;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }

  99.9% {
    border-color: red transparent red transparent;
    pointer-events: none;
  }

  100% {
    transform: rotate(360deg);
    border-color: blue;
  }
}

.play button:hover {
  box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);

}

.play button:focus {
  outline: 0;
  box-shadow: 0 0 0 5px rgba(0, 255, 255, 0.5);
}

.play button::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 27px solid;
  transform: translateX(4px);
  animation: triangle 700ms linear forwards;
}

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

  99.9% {
    opacity: 0;
  }

  100% {
    border-left-color: blue;
    opacity: 1;
  }
}

.hide {
  display: none;
}