如何使用按钮更改过渡持续时间？

Question

嗨，我有这段代码运行良好，但我仍然需要通过单选按钮控制动画的速度。所以我需要更换0.5s

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

有一个变量，但我不知道如何实现它，无论是在 javascript 中还是在按钮中声明变量的值。 任何建议都非常感谢。 谢谢。

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>