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 연속 회전

답변

관련 문제