Sto cercando di ricreare l'effetto ripple del material design in puro CSS e ho preparato l'animazione. Il problema è che non riesco a far funzionare l'animazione fino in fondo quando si fa clic sull'elemento. Ho provato con le transizioni (attempt 1 demo, attempt 2 demo), ma nessuna di queste verrà eseguita fino in fondo.Metodo CSS puro per l'esecuzione di un'animazione tramite clic
L'altro metodo più probabile è con animazioni CSS3 (non sono preoccupato per il supporto del browser in questo momento). Ho i fotogrammi chiave di animazione pronti, ma non ho mai lavorato con le animazioni molto prima e non vedo il modo di eseguire l'animazione dopo aver fatto clic.
@-webkit-keyframes ripple {
0% {
background-size: 1% 1%;
opacity: 0.5;
}
70% {
background-size: 1000% 1000%;
opacity: 0.2;
}
100% {
opacity: 0;
background-size: 1000% 1000%;
}
}
@keyframes ripple {
0% {
background-size: 1% 1%;
opacity: 0.5;
}
70% {
background-size: 1000% 1000%;
opacity: 0.2;
}
100% {
opacity: 0;
background-size: 1000% 1000%;
}
}
.button {
background-color: blue;
padding: 12px;
display: inline-block;
border-radius: 5px;
color: white;
font-family: sans-serif;
text-transform: uppercase;
position: relative;
overflow: hidden;
}
.button::after {
position: absolute;
content: " ";
height: 100%;
width: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(circle at center, #FFF 0%, #FFF 10%, transparent 10.1%, transparent 100%);
background-position: center center;
background-repeat: no-repeat;
background-color: transparent;
-webkit-animation: ripple 0.6s 0s normal forwards infinite running ease-in;
animation: ripple 0.6s 0s normal forwards infinite running ease-in;
}
.button:active::after {
/*Somehow the animation needs to run on click only, and then run all the way through*/
}<div class="ripple button"><a>Click this</a></div>Somethings ho pensato ma non potuto far funzionare includono cambiare il ritardo di animazione, rendendo il ::after trasparente mediante opacity, e utilizzando la funzione di temporizzazione animazione.
Utilizzare javascript per commutare una classe con l'animazione. – js1568
duplicato di http://stackoverflow.com/questions/21919044/css3-transition-on-click-using-pure-css –
o possibilmente utilizzare lo pseudo-selettore: active. Ma personalmente, js sarebbe il migliore qui, dal momento che altre alternative usano gli hack (ad esempio, usando una casella di controllo invisibile) – jbutler483