播放后如何重置 CSS 过渡

Question

如果你按下空格键，我会出现一个加号。 但现在它出现了一次。 你能帮我让它在我每次按空格键时出现吗？ 这是我的代码笔。

import './style.scss';

let counter = 0;

document.addEventListener('keydown', ({ keyCode }) => {
  const increment = document.getElementsByClassName('increment')[0];
  if (keyCode === 32) {
    counter++;
    document.getElementsByClassName('counter')[0].innerText = counter;

    increment.classList.remove('hidden');
    increment.classList.add('move-increment');
  }
});

.container {
   /* ... */

  .counter {
    background-color: gray;
    color: white;
    border-radius: 10px;
    padding: 10px;
  }

  .move-increment {
    margin-top: -20px;
    opacity: 0;
  }

  .hidden {
    visibility: hidden;
  }

  .increment {
    position: absolute;
    margin-left: -33px;
    z-index: 1;
    transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1),
      opacity 1s ease-in-out;
  }
}

Answer 1

尽管我认为@ikiK 的答案是正确答案，因为该问题专门关于使用 CSS 转换，但我想分享一种不同的方法。 我认为“加号”图标的目标是在每次计数器增加时显示。 但是当计数器增加而前一个增量的转换仍在播放时，不可能显示第二个“加号”符号。

我的建议是使用一些 jQuery ，并且在每个增量中， append 将一个新的li项添加到位于计数器顶部的无序列表中。 为li设置动画，将其淡出到顶部。 然后使用animate()的回调 function 在li元素淡出视图后从 DOM 中删除它。

 let counter = 1; $(document).on( 'keypress',function(e) { if( e.which == 32 ) { $('.counter').text(counter++); let increment = $('<li><span class="increment">+</span></li>'); $('#increments').append(increment); increment.animate({ opacity: 0, top: '-=30px' }, 500, function() { increment.remove(); }); } });

 .container { font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; display: flex; height: 500px; align-items: top; justify-content: center; position: relative; overflow: hidden; height: 100px; }.counter { background-color: gray; color: white; border-radius: 10px; padding: 10px; } #increments { padding: 0px; z-index: 1; float: left; margin-left: -33px; list-style: none; } #increments li { position: absolute; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <p>Counter: <span class="counter">0</span></p> <ul id="increments"></ul> </div>

Answer 2

删除添加.move-increment并再次添加删除的hidden类，稍有延迟，这将重新应用您的transition: margin-top （阅读提供的链接为什么延迟）：

    setTimeout(function() {increment.classList.add('hidden');
    increment.classList.remove('move-increment');}, 600);   

解决方案（将键码更改为向上箭头：↑）：

 let counter = 0; document.addEventListener('keydown', ({ keyCode }) => { const increment = document.getElementsByClassName('increment')[0]; if (keyCode === 38) { counter++; document.getElementsByClassName('counter')[0].innerText = counter; increment.classList.remove('hidden'); increment.classList.add('move-increment'); setTimeout(function() { increment.classList.add('hidden'); increment.classList.remove('move-increment'); }, 600); } });

 .container { font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; display: flex; height: 100px; align-items: center; justify-content: center; }.counter { background-color: gray; color: white; border-radius: 10px; padding: 10px; }.move-increment { margin-top: -20px; opacity: 0; }.hidden { visibility: hidden; }.increment { position: absolute; margin-left: -33px; z-index: 1; transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out; }

 <div class="container"> <div> Counter: <span class="counter">0</span> <span class="increment hidden">+</span> </div> </div>

但是，当按键太快时，这并不完美。 尝试更改setTimeout持续时间，看看什么适合您的需要。

在提供的链接中，您有示例如何一起重置 animation（不是转换），并将解决这个快速按键问题。

在此处阅读有关此内容，很少有真正有用的信息：

重启 CSS Animation

使用 JavaScript 控制 CSS 动画和过渡

Answer 3

我认为您不需要隐藏 class，只需使用 setTimeout 重置 class，如下所示：

 let counter = 0; document.addEventListener("keydown", ({ keyCode }) => { const increment = document.getElementsByClassName("increment")[0]; if (keyCode === 32) { counter++; document.getElementsByClassName("counter")[0].innerText = counter; increment.classList.add("move-increment"); setTimeout(function () { increment.classList.remove("move-increment"); }, 1000); } });

 .container { font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: bold; display: flex; height: 500px; align-items: center; justify-content: center; }.container.counter { background-color: gray; color: white; border-radius: 10px; padding: 10px; }.container.increment { position: absolute; margin-left: -33px; z-index: 1; visibility: hidden; margin-top: 0; opacity: 1; transition: margin-top 1s cubic-bezier(0, 0.5, 0.5, 1), opacity 1s ease-in-out; }.container.increment.move-increment { visibility: visible; margin-top: -20px; opacity: 0; }

 <div class="container"> <div> Counter: <span class="counter">0</span> <span class="increment">+</span> </div> </div>