当我停止按下 :active css 时动画就会剪切

Question

我一直在设计一个按钮，然后按下，然后出现一个::after，内容为“复制！”
好吧，当 ::after 出现时有一个动画，该动画通过 :active 属性触发，但是当我停止按下动画时，动画会残酷地结束，中断。没有正确结束
如何停止按下并让动画正常结束？
这是我的代码！

* {
            font-family: monospace;
        }
        table{
            table-layout: fixed;
            width: 100%;
            border-collapse: collapse;
            border: 2px dashed black;
        }
        td, th{
            padding: 5px;
            border: 2px dashed black;
            text-align: center;
        }
        tr td:nth-child(4) span {
            cursor: pointer;
            background: #95c1e3;
            color: white;
            padding: 12px;
            border-radius: 50px;
            font-weight: bolder;
            font-size: 17px;
        }
        tr td:nth-child(4) span:active::after {
            display: block;
            position: absolute;
            width: 100px;
            height: max-content;
            padding: 10px 0px 10px 0px;
            background: black;
            border-radius: 50px;
            animation: copied 1s;
            content: "copiado!";
            opacity: 0;
        }
        @keyframes copied {
            0%{
                margin-top: 0;
                opacity: 1;
            }
            100%{
                margin-top: 15px;
                opacity: 0;
            }
        }

<table>
   <thead>
      <tr>
         <th>Server</th>
         <th>Nombre</th>
         <th>Jugadores</th>
         <th>IP</th>
      </tr>
   </thead>
   <tbody id="tabla">
      <tr>
         <td></td>
         <td>Sin nombre</td>
         <td>1399 / 5000</td>
         <td><span onclick="onclicker()">hub.mc-complex.com</span></td>
      </tr>
      <tr>
         <td></td>
         <td>      ! SuperCraft Network [1.8-1.21] ❤ !
            Amigos en: discord.supercraft.es
         </td>
         <td>333 / 2000</td>
         <td><span onclick="onclicker()">supercraft.es</span></td>
      </tr>
      <tr>
         <td></td>
         <td>   1.8-1.21
            NUEVO &gt; 15 REGALOS DE NAVIDAD
         </td>
         <td>189 / 1000</td>
         <td><span onclick="onclicker()">play.zonecraft.es</span></td>
      </tr>
      <tr>
         <td></td>
         <td>      ! UniversoCraft Network [1.8-1.21] ❤ !
            Chatea en: discord.universocraft.com
         </td>
         <td>5427 / 20000</td>
         <td><span onclick="onclicker()">mc.universocraft.com</span></td>
      </tr>
   </tbody>
</table>

Answer 1

正如 @A Haworth 提到的，您可以考虑使用 JavaScript 来播放动画。

在这里，我们使用

copy

类来显示

::after

元素，然后在一帧后删除该类。然后播放

transition

，它与

:active

伪类是否匹配无关。这意味着不会突然结束。

document.body.addEventListener('click', ({ target }) => {
  if (target.matches('span[onclick="onclicker()"]')) {
    // Add the copy class to show the `::after`.
    target.classList.add('copy');
    // Go through two animation frames to ensure we are on the next frame.
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
          // Remove the copy class to hide the `::after`.
          target.classList.remove('copy');
        });
    });
  }
});

window.onclicker = () => {};

* {
  font-family: monospace;
}
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 2px dashed black;
}
td,
th {
  padding: 5px;
  border: 2px dashed black;
  text-align: center;
}
tr td:nth-child(4) span {
  cursor: pointer;
  background: #95c1e3;
  color: white;
  padding: 12px;
  border-radius: 50px;
  font-weight: bolder;
  font-size: 17px;
}
tr td:nth-child(4) span::after {
  display: block;
  position: absolute;
  width: 100px;
  height: max-content;
  padding: 10px 0px 10px 0px;
  background: black;
  border-radius: 50px;
  content: "copiado!";
  opacity: 0;
  translate: 0 15px;
  transition: translate 1s, opacity 1s;
}
tr td:nth-child(4) span.copy::after {
  opacity: 1;
  translate: 0 0;
  transition: 0s;
}

<table>
  <thead>
    <tr>
      <th>Server</th>
      <th>Nombre</th>
      <th>Jugadores</th>
      <th>IP</th>
    </tr>
  </thead>
  <tbody id="tabla">
    <tr>
      <td></td>
      <td>Sin nombre</td>
      <td>1399 / 5000</td>
      <td><span onclick="onclicker()">hub.mc-complex.com</span></td>
    </tr>
    <tr>
      <td></td>
      <td>! SuperCraft Network [1.8-1.21] ❤ ! Amigos en: discord.supercraft.es</td>
      <td>333 / 2000</td>
      <td><span onclick="onclicker()">supercraft.es</span></td>
    </tr>
    <tr>
      <td></td>
      <td>1.8-1.21 NUEVO &gt; 15 REGALOS DE NAVIDAD</td>
      <td>189 / 1000</td>
      <td><span onclick="onclicker()">play.zonecraft.es</span></td>
    </tr>
    <tr>
      <td></td>
      <td>! UniversoCraft Network [1.8-1.21] ❤ ! Chatea en: discord.universocraft.com</td>
      <td>5427 / 20000</td>
      <td><span onclick="onclicker()">mc.universocraft.com</span></td>
    </tr>
  </tbody>
</table>

另一种 JavaScript 解决方案可能是使用 Web Animations API:

document.body.addEventListener('click', ({ target }) => {
  if (target.matches('span[onclick="onclicker()"]')) {
    const keyframes = [
      {
        opacity: 1,
        translate: '0 0',
      },
      {
        opacity: 0,
        translate: '0 15px',
      },
    ];
    const options = {
      duration: 1000,
      timing: 'cubic-bezier(0.32, 0, 0.67, 0)',
      pseudoElement: '::after',
    };
    target.animate(keyframes, options);
  }
});

window.onclicker = () => {};

* {
  font-family: monospace;
}
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 2px dashed black;
}
td,
th {
  padding: 5px;
  border: 2px dashed black;
  text-align: center;
}
tr td:nth-child(4) span {
  cursor: pointer;
  background: #95c1e3;
  color: white;
  padding: 12px;
  border-radius: 50px;
  font-weight: bolder;
  font-size: 17px;
}
tr td:nth-child(4) span::after {
  display: block;
  position: absolute;
  width: 100px;
  height: max-content;
  padding: 10px 0px 10px 0px;
  background: black;
  border-radius: 50px;
  content: "copiado!";
  opacity: 0;
  translate: 0 15px;
}

<table>
  <thead>
    <tr>
      <th>Server</th>
      <th>Nombre</th>
      <th>Jugadores</th>
      <th>IP</th>
    </tr>
  </thead>
  <tbody id="tabla">
    <tr>
      <td></td>
      <td>Sin nombre</td>
      <td>1399 / 5000</td>
      <td><span onclick="onclicker()">hub.mc-complex.com</span></td>
    </tr>
    <tr>
      <td></td>
      <td>! SuperCraft Network [1.8-1.21] ❤ ! Amigos en: discord.supercraft.es</td>
      <td>333 / 2000</td>
      <td><span onclick="onclicker()">supercraft.es</span></td>
    </tr>
    <tr>
      <td></td>
      <td>1.8-1.21 NUEVO &gt; 15 REGALOS DE NAVIDAD</td>
      <td>189 / 1000</td>
      <td><span onclick="onclicker()">play.zonecraft.es</span></td>
    </tr>
    <tr>
      <td></td>
      <td>! UniversoCraft Network [1.8-1.21] ❤ ! Chatea en: discord.universocraft.com</td>
      <td>5427 / 20000</td>
      <td><span onclick="onclicker()">mc.universocraft.com</span></td>
    </tr>
  </tbody>
</table>

对于仅 CSS 的替代方案，您可以在

:active

匹配时显示该元素，然后在匹配时间较长时使其淡出：

document.body.addEventListener('click', ({ target }) => {
  if (target.matches('span[onclick="onclicker()"]')) {
    // Add the copy class to show the `::after`.
    target.classList.add('copy');
    // Go through two animation frames to ensure we are on the next frame.
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
          // Remove the copy class to hide the `::after`.
          target.classList.remove('copy');
        });
    });
  }
});

window.onclicker = () => {};

* {
  font-family: monospace;
}
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 2px dashed black;
}
td,
th {
  padding: 5px;
  border: 2px dashed black;
  text-align: center;
}
tr td:nth-child(4) span {
  cursor: pointer;
  background: #95c1e3;
  color: white;
  padding: 12px;
  border-radius: 50px;
  font-weight: bolder;
  font-size: 17px;
}
tr td:nth-child(4) span::after {
  display: block;
  position: absolute;
  width: 100px;
  height: max-content;
  padding: 10px 0px 10px 0px;
  background: black;
  border-radius: 50px;
  content: "copiado!";
  opacity: 0;
  translate: 0 15px;
  transition: translate 1s, opacity 1s;
}
tr td:nth-child(4) span:active::after {
  opacity: 1;
  translate: 0 0;
  transition: 0s;
}

<table>
  <thead>
    <tr>
      <th>Server</th>
      <th>Nombre</th>
      <th>Jugadores</th>
      <th>IP</th>
    </tr>
  </thead>
  <tbody id="tabla">
    <tr>
      <td></td>
      <td>Sin nombre</td>
      <td>1399 / 5000</td>
      <td><span onclick="onclicker()">hub.mc-complex.com</span></td>
    </tr>
    <tr>
      <td></td>
      <td>! SuperCraft Network [1.8-1.21] ❤ ! Amigos en: discord.supercraft.es</td>
      <td>333 / 2000</td>
      <td><span onclick="onclicker()">supercraft.es</span></td>
    </tr>
    <tr>
      <td></td>
      <td>1.8-1.21 NUEVO &gt; 15 REGALOS DE NAVIDAD</td>
      <td>189 / 1000</td>
      <td><span onclick="onclicker()">play.zonecraft.es</span></td>
    </tr>
    <tr>
      <td></td>
      <td>! UniversoCraft Network [1.8-1.21] ❤ ! Chatea en: discord.universocraft.com</td>
      <td>5427 / 20000</td>
      <td><span onclick="onclicker()">mc.universocraft.com</span></td>
    </tr>
  </tbody>
</table>