Ponownie użyj animacji CSS w odwrotnym kierunku (przez zresetowanie stanu?)

Question

Użyłem dwóch animacji klatek kluczowych w CSS. Jedna porusza się od lewej do prawej, a druga używa dokładnie tych samych wartości - ale odwrotnie.

@keyframes moveLeft 
{ 
    from {transform: translate3d(50px, 0, 0);} 
    to {transform: translate3d(0px, 0, 0);} 
} 


@keyframes moveRight 
{ 
    from {transform: translate3d(0px, 0, 0);} 
    to {transform: translate3d(50px, 0, 0);} 
} 

Zastanawiam się jednak, czy możliwe jest użycie tylko jednej animacji klatki kluczowej. ale zaraz po dodaniu animation-direction: reverse animacja jest odtwarzana tylko raz. Prawdopodobnie zapisuje informacje, które były wcześniej używane. Więc: czy mogę jakoś zresetować te informacje? Czy jest jakaś możliwość użycia jednej animacji dwa razy w różnych kierunkach? (Bez użycia JS)

http://jsfiddle.net/vrhfd66x/

Answer 1

Nie, nie ma sposobu, aby ponownie uruchomić animację używając sam CSS. Musisz użyć JavaScript, aby usunąć animację z elementu, a następnie ponownie zastosować ją do elementu (po pewnym czasie), aby ponownie uruchomić.

Poniżej jest co W3C's CSS3 Animation Spec mówi (w innym kontekście, ale punkt powinien posiadać dobry w tym przypadku również):

Należy również zauważyć, że zmiany wartości „animacji-name” niekoniecznie zrestartuj animację (np. jeśli lista animacji zostanie zastosowana, a jedna zostanie usunięta z listy, tylko ta animacja zostanie zatrzymana, pozostałe animacje będą kontynuowane). Aby ponownie uruchomić animację, należy ją usunąć, a następnie ponownie zastosować.

^{nacisk jest moje}

Ten CSS Tricks Article Chris Coiyer wskazuje również takie same i zapewnia pewne rozwiązania JS na ponowne uruchomienie animacji. (Uwaga: Artykuł zawiera odniesienie do dabbletu Oli, który twierdzi, że zmiana właściwości, takich jak czas trwania, liczba iteracji, powoduje ponowne uruchomienie w Webkit, ale wydaje się być przestarzała, ponieważ nie działają już w Chrome).

---

Podsumowanie:

Choć już poruszył Poniżej mam zamiar ponownie powtórzyć, ze względu na kompletność:

• Gdy animacja jest nakładana na elemencie, pozostaje na elemencie, dopóki go nie usunie.
• UA śledzi animację na elemencie i to, czy zakończyła się, czy nie.
• Po zastosowaniu tej samej animacji na :checked (aczkolwiek w innym kierunku), UU nie robi nic, ponieważ animacja już istnieje w elemencie.
• Przełączenie pozycji (chwilowe) podczas klikania pola wyboru następuje z powodu ustawienia transform w selektorze :checked. Obecność animacji nie robi różnicy.

---

Solutions:

Jak widać z poniższego fragmentu, osiągnięcie tego celu za pomocą jednego animacji jest dość skomplikowany, nawet przy użyciu JavaScript.

var input = document.getElementsByClassName("my-checkbox")[0]; 
 

 
input.addEventListener('click', function() { 
 
    if (this.checked) { 
 
    this.classList.remove('my-checkbox'); 
 
    window.setTimeout(function() { 
 
     input.classList.add('anim'); 
 
     input.classList.add('checked'); 
 
    }, 10); 
 
    } else { 
 
    this.classList.remove('anim'); 
 
    window.setTimeout(function() { 
 
     input.classList.remove('checked'); 
 
     input.classList.add('my-checkbox'); 
 
    }, 10); 
 
    } 
 
});

input { 
 
    transform: translate3d(50px, 0, 0); 
 
} 
 
.my-checkbox { 
 
    animation: moveLeft 1s; 
 
    animation-direction: reverse; 
 
} 
 
.checked { 
 
    transform: translate3d(0px, 0, 0); 
 
} 
 
.anim{ 
 
    animation: moveLeft 1s; 
 
} 
 
@keyframes moveLeft { 
 
    from { 
 
    transform: translate3d(50px, 0, 0); 
 
    } 
 
    to { 
 
    transform: translate3d(0px, 0, 0); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<input type="checkbox" class="my-checkbox">

Tak, najlepszym rozwiązaniem (jeśli chcesz, aby trzymać się animacje CSS) jest użytku dwa różne animacje.

Alternatywnie możesz również rzucić okiem na komentarz Marcelo. Jeśli rzeczywisty przypadek użycia jest dokładnie taki, jak podano w skrzypcach, wystarczyłby transition, a animation nie jest wymagany. Przejścia mogą działać zarówno w kierunku do przodu, jak iw odwrotnym kierunku, przez co są bezpieczniejsze.