Gedrehtes Symbol wird nach Abschluss der Animation zurückgesetzt

Question

Ich versuche, mein Symbol zu animieren, um 45 Grad nach einem Klickereignis zu rotieren, und nachdem Sie es erneut angeklickt haben, dreht es sich zurück. Wenn ich nach dem Ende der Animation meine anfängliche Drehung nach dem Klick erhalte, ohne sie anzuklicken, springt sie in den ursprünglichen Zustand zurück.

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

Was Sie versuchen, eine CSS-Hack zu tun würde eine Click-Ereignis
Sie lesen auf CSS Click events

können nachahmen können Sie Sehen Sie auch meine Lösung auf JSFiddle

Hier

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

ist der CSS-Code

/* 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); 
}  

Die einzigen wichtigen Linien im CSS-Code sind die toggled state, checkbox hack und transition Eigenschaft im div Standardzustand

AKTUALISIERT ANTWORT

Da Sie Javascript verwenden, um Klickereignisse zu verarbeiten, ist es viel einfacher,zu verwenden 0 statt eines transition Ich weiß nicht, was Ihre Click-Handler aussieht, aber sie stellte fest, dass es verschiedene Klassen ist Makeln so dies ist der Code ich

schrieb

Hier ist der CSS-Code

@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; 
} 

Hier ist die Javascript Code

$(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'); 
    } 
    }); 
}); 

Der Grund, warum animation besser ist, ist, weil es mehr Kontrolle bietet. Der Wert forwards ermöglicht es Ihnen, ein Element nach Abschluss der Animation im neuen Status zu belassen.

können Sie dieses Kontroll JSFiddle

Hope this es