javascript - Jquery 和 CSS 按钮切换旋转动画

Question

我的按钮有问题。我希望它像切换一样。第一次单击 - 旋转到预定义值。第二次单击 - 转到原始值。两者都需要设置关键帧，以便动画看起来流畅而不仅仅是即时的。

HTML

<center><a id="c_button" class="c_button"><i class="material-icons">settings</i></a><center>

CSS

.c_button{
background-color:#607D8B;
border-radius:50px;
padding: 15px;
display:inline-block;
color:#F5F5F5;
font-family:Roboto;
font-size:16px;
font-weight:bold;
width:24px;
text-decoration:none;
text-align: center;
line-height: 0px;
}.c_button:hover {
background-color:#56707D;
position:relative;
}.c_button:active {
position:relative;
top:1px;
}

/*used to create rotation animation*/
a.on {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);

-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all;
background-color:#56707D;
}
a.on:hover {
background-color:#607D8B;
}
a.on:active{
}

JS

$(document).ready(function () {
$('a#c_button').click(function () {
    $(this).toggleClass("on");
});
});

这是一个 JSFiddle https://jsfiddle.net/csck5j3h/ 我想出了第一个切换动画。似乎无法弄清楚另一个。

Answer 1

这是您要找的吗？

-webkit-transition: 200ms linear all;
-moz-transition: 200ms linear all;
-o-transition: 200ms linear all;
transition: 200ms linear all; 

需要添加到a，而不是a.on

$('#c_button').click(function(){
     $(this).find('a').toggleClass('on'); 
});

.c_button {
    background-color:#607D8B;
    border-radius:50px;
    padding: 15px;
    display:inline-block;
    color:#F5F5F5;
    font-family:Roboto;
    font-size:16px;
    font-weight:bold;
    width:24px;
    text-decoration:none;
    text-align: center;
    line-height: 0px;
}
.c_button:hover {
    background-color:#56707D;
    position:relative;
}
.c_button:active {
    position:relative;
    top:1px;
}
/*used to create rotation animation for JS*/
a{
  -webkit-transition: 200ms linear all;
    -moz-transition: 200ms linear all;
    -o-transition: 200ms linear all;
    transition: 200ms linear all;  
}
 a.on {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    
    background-color:#56707D;
}
a.on:hover {
    background-color:#607D8B;
}
a.on:active {
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="c_button">
    <center><a id="c_button" class="c_button">A</a><center>
</div>