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

＆＃13;

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

＆＃13;

.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 {
}

＆＃13;

<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>

＆＃13;

Answer 2

添加c_button 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;
    /*add transition time effect here*/
    -webkit-transition: 200ms linear all;
    -moz-transition: 200ms linear all;
    -o-transition: 200ms linear all;
     transition: 200ms linear all;
}

并使用你的jQuery

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

<强> JSFiddle Demo

Answer 3

只需添加：

a{
   -webkit-transition: 200ms linear all;
   -moz-transition: 200ms linear all;
   -o-transition: 200ms linear all;
   transition: 200ms linear all;
}

它允许您在不在

时进行转换

Jquery和CSS按钮切换旋转动画

3 个答案: