播放后如何重置 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

删除添加的.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 持续时间，看看适合您的需要。

在提供的链接中，您有示例如何一起重置动画（而不是过渡），并解决这个快速按键问题。

在这里阅读这个，很少有真正有用的信息：

Restart CSS Animation

Controlling CSS Animations and Transitions with JavaScript

Answer 2

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

我的建议是使用一些 jQuery，并在每次增量时，将一个新的 li 项目附加到位于计数器顶部的无序列表中。为li 设置动画，将其淡出到顶部。然后使用 animate() 的回调函数在 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 3

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

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>