javascript - 如何将容器保持按钮放入代码中

Question

我需要将播放按钮放在不与 html 混合的单独容器中。这是为了让按钮能够淡入。我在这里做了，你可以看到按钮正在淡入。

播放按钮淡入： https ://jsfiddle.net/92fc7w0n/

我需要做的是从这里的工作代码中删除播放按钮，并将它们放在一个容器中。

工作代码： https ://jsfiddle.net/5r9qkg4s/

这里的代码删除了播放按钮。

从工作代码中删除的按钮： https ://jsfiddle.net/4vtna6kz/

我需要帮助的是放置这个playButtonContainer https://jsfiddle.net/92fc7w0n/

在删除播放按钮的这段代码中。https://jsfiddle.net/exf86gwL/

它应该在 html 中这样设置。

<div class="outer">
</div>

<div class="playButtonContainer">
</div>

这是我最难弄清楚该怎么做的地方。我提供的片段是在容器内淡入的播放按钮。该容器需要放置在我从中删除播放按钮的代码中。

这里： https ://jsfiddle.net/exf86gwL/

我怎么能做到这一点？

这是我在此链接上的尝试： https ://jsfiddle.net/jr45bo96/

按钮淡入，但单击它们时没有任何反应。

我不知道如何让代码工作。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.playButtonContainer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  gap: 10px;
  animation: fadeInButtons 5s ease 0s forwards;
}

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

  100% {
    opacity: 1;

  }
}

.thePlay {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

button.thePlay {
  pointer-events: none;
}

<div class="playButtonContainer">
  <button class="playa thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <g id="play">
        <title>Play</title>
        <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
        <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                  M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
      </g>
    </svg>
  </button>
  <button class="playb thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button class="playc thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button class="playd thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button class="playe thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button class="playf thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
  <button class="playg thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playh thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>

  <button class="playi thePlay" type="button" aria-label="Open">
    <svg width="100%" height="100%" viewBox="0 0 64 64">
      <use href="#play" />
    </svg>
  </button>
</div>

标签： javascripthtmlcssbuttoncontainers