沒有setTimeout的CSS連續旋轉

所以我設法創建了一個旋轉，只使用setTimeout在一個方向上旋轉。我想知道如果不使用它，我是否仍然可以實現這一目標。我遇到的主要問題是，如果我點擊的速度夠快，它仍然會以另一種方式旋轉。沒有setTimeout的CSS連續旋轉

總體而言，是否有一種方法可以使其向一個方向旋轉，而不管點擊的速度如何。

function clicked() 
 
{ 
 
    element = $("#spin"); 
 
    if ($(element).hasClass("rotate2")) 
 
    { 
 
    $(element).removeClass("rotate rotate2"); 
 
    setTimeout(() => $(element).addClass("rotate"), 1); 
 
    } 
 
    else if($(element).hasClass("rotate")) 
 
    { 
 
    $(element).addClass("rotate2"); 
 
    } 
 
    else 
 
    { 
 
    $(element).addClass("rotate"); 
 
    } 
 
}

div.horizontal { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 5px; 
 
    background-color: red; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
div.horizontal.rotate { 
 
    transform: translateY(-50%) rotate(-180deg); 
 
    transition: transform 0.5s; 
 
} 
 
div.horizontal.rotate2 { 
 
    transform: translateY(-50%) rotate(-360deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width: 50px; height: 50px; position: relative;"> 
 
    <div id="spin" class="horizontal"> 
 
    
 
    </div> 
 
</div> 
 
<button onclick="clicked()">Rotate</button>

來源

2017-03-27 A. Lau

這樣的課嗎？ http://codepen.io/anon/pen/ryZZxW –

@MichaelCoker這很不錯，只是想知道是否有可能讓它旋轉得更快，以便「追上」它的目標位置。我正在計劃將此與菜單結合使用，如果用戶單擊某個按鈕，則會顯示一個菜單並隱藏第二次點擊。只是一種反垃圾郵件的保護措施，它反轉。但如果沒有辦法做到這一點，我可以接受你的答案。只是好奇，這個工作的瀏覽器是什麼？ –

第二次點擊後旋轉速度是否更快？ –

你可以只使用一個類的過渡，並刪除transitionend

var $button = $('#button'), 
 
    $spin = $('#spin'); 
 

 
$(document).on('click', $button, function() { 
 
    $spin.addClass('rotate').on('transitionend',function() { 
 
    $(this).removeClass('rotate'); 
 
    }); 
 
})

div.horizontal { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 5px; 
 
    background-color: red; 
 
    top: 50%; 
 
} 
 

 
div.horizontal.rotate { 
 
    transform: rotate(-180deg); 
 
    transition: transform .5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width: 50px; height: 50px; position: relative;"> 
 
    <div id="spin" class="horizontal"> 
 
    </div> 
 
</div> 
 
<button id="button">Rotate</button>

來源

2017-03-28 00:46:28

沒有setTimeout的CSS連續旋轉

回答

相關問題