javascript - 播放后如何重置 CSS 过渡

Question

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

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，并在每次增量时附加一个新的 li项添加到位于计数器顶部的无序列表中。动画 li ，将其淡出到顶部。然后使用animate()的回调函数删除 li DOM 中的元素一旦淡出 View 。

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>