javascript - "Stop"css transition 中点击

Question

我有一个 toggleClass 应用于点击按钮。按钮旋转和淡入淡出并具有持续时间。如果你快速点击按钮，它会导致旋转不同步。通常要处理此问题，您会在 jQuery 中使用 stop。不过，我试图将样式保留在样式表中。如果您在转换之间单击，是否可以跳转到开头或结尾？

$('.drawer-dropdown-button').on('click', function() {
  $(this).toggleClass('drawer-dropdown-button--active');
  
  const height = $('.list').height() > 0 ? 0 : $('.list').prop('scrollHeight');
  
  $('.list').css('height', `${height}px`);
});

body {
  padding: 30px;
}

.drawer-dropdown-button {
  align-self: center;
  align-items: center;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  transition: transform 0.4s ease-in-out;
  width: 14px;
}

.drawer-dropdown-button:focus {
  outline: none;
}

.drawer-dropdown-button:before,
.drawer-dropdown-button:after {
  content: "";
  display: inline-block;
  position: absolute;
  background: #0076ff;
}

.drawer-dropdown-button:before {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
  width: 14px;
  height: 2px;
}

.drawer-dropdown-button:after {
  height: 14px;
  width: 2px;
}

.drawer-dropdown-button.drawer-dropdown-button--active {
  transform: rotate(90deg);
}

.drawer-dropdown-button.drawer-dropdown-button--active:before {
  opacity: 0;
}

.drawer-dropdown-button:hover:before,
.drawer-dropdown-button:hover:after {
  background: #3398ff;
}

.list {
  height: 0;
  overflow: hidden;
  transition: height 300ms ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="drawer-dropdown-button"></button>

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

Answer 1

一个简单的修复方法是 element.css({'pointer-events':'none'}) 这样您就可以禁用所有传入的点击。

动画完成后你可以做

setTimeout(function() {
        element.css({'pointer-events':''})
      }, 300)

$('.drawer-dropdown-button').on('click', function() {
  var element = $(this)
  element.toggleClass('drawer-dropdown-button--active');
  element.css({'pointer-events':'none'})
  const height = $('.list').height() > 0 ? 0 :     $('.list').prop('scrollHeight');
  
  $('.list').css('height', `${height}px`);
  setTimeout(function() {
    element.css({'pointer-events':''})
  }, 300)
});

body {
  padding: 30px;
}

.drawer-dropdown-button {
  align-self: center;
  align-items: center;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
  transition: transform 0.4s ease-in-out;
  width: 14px;
}

.drawer-dropdown-button:focus {
  outline: none;
}

.drawer-dropdown-button:before,
.drawer-dropdown-button:after {
  content: "";
  display: inline-block;
  position: absolute;
  background: #0076ff;
}

.drawer-dropdown-button:before {
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
  width: 14px;
  height: 2px;
}

.drawer-dropdown-button:after {
  height: 14px;
  width: 2px;
}

.drawer-dropdown-button.drawer-dropdown-button--active {
  transform: rotate(90deg);
}

.drawer-dropdown-button.drawer-dropdown-button--active:before {
  opacity: 0;
}

.drawer-dropdown-button:hover:before,
.drawer-dropdown-button:hover:after {
  background: #3398ff;
}

.list {
  height: 0;
  overflow: hidden;
  transition: height 300ms ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="drawer-dropdown-button"></button>

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>