단추로 전환 기간을 변경하는 방법은 무엇입니까?

Question

안녕하세요,이 코드는 잘 작동하지만 라디오 버튼을 통해 애니메이션의 속도를 제어해야합니다. 그래서 나는 변수와 함께 0.5 초

-webkit-transition: all 0.5s ease-in-out; 

를 교체해야하지만, 난 변수의 값을 선언 자바 스크립트와 버튼에 하나, 그것을 구현하는 방법을 모르겠어요. 모든 제안은 매우 감사드립니다. 감사합니다. .

JAVASCRIPT

document.getElementById('panner01').onclick = function() { 
var div = document.getElementById('panpos01'), 
    deg = 30; 
div.style.webkitTransform = 'rotate('+deg+'deg)';  

} 

document.getElementById('panner02').onclick = function() { 
var div = document.getElementById('panpos01'), 
    deg = 60; 
div.style.webkitTransform = 'rotate('+deg+'deg)';  

} 

document.getElementById('panner03').onclick = function() { 
var div = document.getElementById('panpos01'), 
    deg = 90; 
div.style.webkitTransform = 'rotate('+deg+'deg)';  

} 

CSS

#panpos01 { 
position:relative; 
height: 200px; 
width: 200px; 
margin: 30px; 
-webkit-transition: all 0.5s ease-in-out; 
} 

HTML

<div id="panimageloc01"><img id="panpos01" src="https://d30y9cdsu7xlg0.cloudfront.net/png/17392-200.png"></div> 

<form action=""> 
    <input type="radio" name="gender" id="panner01" value="1"> 1 
    <br> 
    <input type="radio" name="gender" id="panner02" value="2"> 2 
    <br> 
    <input type="radio" name="gender" id="panner03" value="3"> 3 
</form> 

Fiddle

Answer 1

변경 속성 transitionDuration

document.getElementById('panner01').onclick = function() { 
 
    var div = document.getElementById('panpos01'), 
 
    deg = 30; 
 
    div.style.transform = 'rotate(' + deg + 'deg)'; 
 
    div.style.transitionDuration = '1.5s'; 
 

 
} 
 

 
document.getElementById('panner02').onclick = function() { 
 
    var div = document.getElementById('panpos01'), 
 
    deg = 60; 
 
    div.style.transform = 'rotate(' + deg + 'deg)'; 
 
    div.style.transitionDuration = '0.5s'; 
 

 
} 
 

 
document.getElementById('panner03').onclick = function() { 
 
    var div = document.getElementById('panpos01'), 
 
    deg = 90; 
 
    div.style.transform = 'rotate(' + deg + 'deg)'; 
 
    div.style.transitionDuration = '5s'; 
 

 
}

#panpos01 { 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 30px; 
 
    transition: all 0.5s ease-in-out; 
 
}

<div id="panimageloc01"><img id="panpos01" src="https://d30y9cdsu7xlg0.cloudfront.net/png/17392-200.png"></div> 
 

 
<form action=""> 
 
    <input type="radio" name="gender" id="panner01" value="1"> 1 
 
    <br> 
 
    <input type="radio" name="gender" id="panner02" value="2"> 2 
 
    <br> 
 
    <input type="radio" name="gender" id="panner03" value="3"> 3 
 
</form>