“停止”CSS 過渡中點擊

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>