旋轉圖標在動畫完成後對齊

Question

嘗試將點擊事件時旋轉45度的圖標動起來，再次單擊它之後它會旋轉回來。在點擊後成功進行初始旋轉，但無需點擊，在動畫完成後，它會恢復到原始狀態。

HTML

<div class="trip-detail--icon-plus"> 
    <span class="transport--plus spin" ng-class="{active:showActionOptions}"></span> 
</div> 

CSS

.spin::before { 
    -moz-transition: transform 1s ease; 
    -webkit-transition: transform 1s ease; 
    -o-transition: transform 1s ease; 
    transition: transform 1s ease; 
} 


.spin.active::before { 
    display: inline-block; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 

Answer 1

什麼你試圖做將需要一個CSS破解模仿click事件
您可以在CSS Click events

你可以閱讀也可以查看我的解決方案JSFiddle

<input type="checkbox" id="toggle-1"> 
<label for="toggle-1"> 
    <div>Control me</div> 
</label> 

這裏是CSS代碼

/* Checkbox Hack */ 
input[type=checkbox] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

label { 
    display: inline-block; 
    margin: 60px 0 10px 0; 
    cursor: pointer; 
} 

/* Default State */ 
div { 
    background: green; 
    width: 400px; height: 100px; 
    line-height: 100px; 
    color: white; 
    text-align: center; 
    transition: transform 2s ease; 
} 

/* Toggled State */ 
input[type=checkbox]:checked ~ label div { 
    background: red; 
    transform: rotate(45deg); 
}  

在CSS代碼中的唯一重要的線是在div默認狀態

修訂回答toggled state，checkbox hack和transition財產

由於您使用的是JavaScript來處理點擊事件，因此使用來完成起來要容易得多0，而不是一個transition的，我不知道你的點擊處理程序是什麼樣子，但你說，這是切換不同的類，所以這是我寫的

這裏代碼的CSS代碼

@keyframes spin-forward { 
    from { 
    transform: rotate(0deg); 
    } to { 
    transform: rotate(45deg); 
    } 
} 

@keyframes spin-backword { 
    from { 
    transform: rotate(45deg); 
    } to { 
    transform: rotate(0deg); 
    } 
} 

.spin-right { 
    animation: spin-forward 2s ease forwards; 
} 

.spin-left { 
    animation: spin-backword 2s ease forwards; 
} 

這裏的Java腳本代碼

$(function() { 
    $('div').on('click', function() { 
    var el = $(this); 
    var klass = this.className; 
    if (klass === "") { 
     el.addClass('spin-right'); 
    } else if (klass === 'spin-right') { 
     el.attr('class', 'spin-left'); 
    } else { 
     el.attr('class', 'spin-right'); 
    } 
    }); 
}); 

之所以animation更好是因爲它提供了更多的控制權。值forwards允許您在動畫完成後將元素保持在新狀態。

您可以檢查此JSFiddle

希望這會解決它