애니메이션 완료 후 회전 된 아이콘이 뒤로 스 와이프합니다.

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 events

당신이 할 수있는 읽을 수있는 클릭 이벤트를 모방하기 위해 CSS 해킹을 필요로 할 노력하고 내 솔루션보기 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 코드의 유일한 중요한 라인 사업부의 기본 상태

업데이트] 답변에 toggled state, checkbox hack 및 transition 재산에게 있습니다

클릭 이벤트를 처리하는 데 자바 스크립트를 사용하고 있으므로을 사용하면 훨씬 쉽게 수행 할 수 있습니다. 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; 
} 

가 다른 클래스를 JavaScript의 것 전환되는 것을 언급 코드

$(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 값을 사용하면 애니메이션이 끝난 후에 요소를 새 상태로 유지할 수 있습니다.

당신은