jQuery和CSS Button切換旋轉動畫

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> 

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

Answer 3

只需添加：

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

它允許您在不打開時進行過渡