2
Ich arbeite an einem Material Stil Animation für meine Tasten. Versuchte jede JS zu vermeiden, kam so auf die folgenden Arten:CSS-Animation auf Fokus zurückgesetzt
http://codepen.io/Deka87/pen/zNJyqg
// Animationen
.btn {
position: relative;
&:after {
content: '';
position: absolute;
top: 0; bottom: 0; left: -10%; right: -10%;
border-top-left-radius: 2% 50%;
border-bottom-left-radius: 2% 50%;
border-top-right-radius: 2% 50%;
border-bottom-right-radius: 2% 50%;
background-color: fade(black,5%);
transform: scale(0,1);
opacity: 0;
}
&:focus {
&:after {
animation: click-animation .6s linear;
animation-fill-mode: backwards;
}
}
}
@keyframes click-animation {
0% {
opacity: 0;
transform: scale(0,1);
}
50% {
opacity: 1;
transform: scale(.5,1);
}
100% {
opacity: 0;
transform: scale(1,1);
}
}
Es funktioniert ziemlich viel wie erwartet (zumindest auf Chrome). Das Problem ist, wenn Sie mehrmals auf die Schaltfläche klicken, wird die Animation nur einmal ausgelöst. Dies geschieht, weil die Schaltfläche bereits "fokussiert" ist, sodass die Animation nicht wiederholt wird. Durch Klicken auf eine beliebige Stelle außerhalb der Schaltfläche und erneutes Klicken auf die Schaltfläche wird das Problem behoben. Irgendwelche Ideen, wie das zu beheben ist?
Damit eine Animation neu gestartet werden kann, muss sie zuerst aus dem Element entfernt und erneut angehängt werden. Dies ist erforderlich, da der UA den Iterationszähler verfolgt. Es wird höchstwahrscheinlich benötigt, entweder den 'Fokus' über JS zu entfernen oder den Wert der Animationseigenschaft über JS zu annullieren (durch Anhören des Animationsend-Ereignisses). Es ist möglich, dass jemand das Ganze auf eine andere Art und Weise umschreiben kann und das erreichen kann, was Sie wollen, aber mit dem derzeitigen Ansatz, glaube ich nicht, dass es ohne JS möglich ist. – Harry
Danke @Harry. Ja, ich habe diese Beispiele mit versteckten Radioknöpfen gesehen, aber diese sehen noch hässlicher aus. – sdvnksv
@Harry &: focus: nicht (: aktiv) {...} hat es funktioniert! – sdvnksv