teknolagi
¿Cómo puedo hacer que una animación CSS se reproduzca con un onClick de JavaScript? actualmente tengo:
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
}
to {
-webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
}
}
¿Cómo puedo aplicar un onClick?
Shisoft
¿Está seguro de que solo muestra su página en webkit? Aquí está el código, pasado en safari. La imagen (id='img') rotará después de hacer clic en el botón.
function ani() {
document.getElementById('img').className="classname";
}.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
}
to {
-webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
}
}<input name="" type="button" onclick="ani()" value="Click">
<img id="img" src="https://i.stack.imgur.com/vghKS.png" width="328" height="328" />-
Solo tenga en cuenta que usar
.classNameeliminará todas sus otras clases en el elemento dado. Si no lo desea, utilicedocument.getElementById('img').classList.add('classname');– Drew Kennedy
1 de noviembre de 2016 a las 21:05
-
Esto se anima solo la primera vez que haces clic. Los clics posteriores no hacen nada. Utilizar
sad comradesiguiente método para habilitar varios clics.–Max S.
23/03/2022 a las 22:55
solo usas el :active pseudo-clase. Esto se establece al hacer clic en cualquier elemento.
.classname:active {
/* animation css */
}
-
Ah, entendí mal tu pregunta. yo pensar La respuesta de Ravi funcionará para usted en ese caso.
–Paul Fisher
31 de enero de 2011 a las 7:10
-
Esto fue muy útil para mí. Ejecutó la animación solo mientras el usuario mantenía presionado el botón del mouse, que era exactamente lo que necesitaba.
– anuncio
10 de agosto de 2016 a las 5:25
-
Esto es lo que necesitaba también.
– b_d_m_p
25 de diciembre de 2019 a las 5:10
-
Gracias por esta respuesta, que era exactamente lo que estaba buscando.
– Asela Priyadarshana
18 de agosto de 2021 a las 4:59
Solución encontrada en css-trucos
const element = document.getElementById('img')
element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation
-
Activar el reflujo en la línea media es un truco ingenioso. justo lo que necesitaba
– he77kat_
18 de abril de 2020 a las 14:25
-
¿Cómo funciona la activación del reflujo?
– vania
29 de julio de 2022 a las 12:24
-
@ he77kat_ Ni siquiera sé qué significa reflujo, ni puedo encontrar una buena explicación. ¿Te importa obligar?
– ptrcao
2 de enero a las 1:19
-
@ptrcao reflow es el nombre del proceso del navegador web para volver a calcular las posiciones y geometrías de los elementos en el documento HTML, con el fin de volver a representar parte o la totalidad del documento. Ciertas API del navegador o propiedades de documentos hacen que este proceso se reinicie y
elem.offsetWidthes uno de ellos– he77kat_
2 ene a las 18:08
Puede lograr esto vinculando un oyente onclick y luego agregando la clase animada de esta manera:
$('#button').onClick(function(){
$('#target_element').addClass('animate_class_name');
});
Solución CSS SOLAMENTE que funciona con cada clic y reproduce la animación hasta el final:
Todo lo que tienes que hacer es añadir la animación a la :focus pseudo clase y configúrelo en ninguno en :active pseudoclase.
Si su elemento no es enfocable, agregue tabindex="0" atributo al elemento html:
@keyframes beat {
0% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(0.8,0.8);
transform: scale(0.8, 0.8);
}
}
.className {
background-color:#07d;
color: #fff;
font-family: sans-serif;
font-size: 20px;
padding: 20px;
margin:5px;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.className:focus {
-webkit-animation: beat 1s ease-in-out backwards;
animation: beat 1s ease-in-out backwards;
}
.className:active {
-webkit-animation: none;
animation: none;
}
body {
text-align: center;
} <h3>Any element with tabindex="0", like a div:</h3>
<div tabindex="0" class="className"> Click me many times!</div>
<h3>Any focusable element like a button:</h3>
<button class="className"> Click me many times!</button>-
el único problema que veo con esto: si hago clic en cualquiera de los controles de demostración, luego cambio de pestaña, luego vuelvo a cambiar, la animación se reproduce sin hacer clic.
– Will
9 de noviembre de 2021 a las 22:14
rk roy
var abox = document.getElementsByClassName("box")[0];
function allmove(){
abox.classList.remove("move-ltr");
abox.classList.remove("move-ttb");
abox.classList.toggle("move");
}
function ltr(){
abox.classList.remove("move");
abox.classList.remove("move-ttb");
abox.classList.toggle("move-ltr");
}
function ttb(){
abox.classList.remove("move-ltr");
abox.classList.remove("move");
abox.classList.toggle("move-ttb");
}.box {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.move{
-webkit-animation: moveall 5s;
animation: moveall 5s;
}
.move-ltr{
-webkit-animation: moveltr 5s;
animation: moveltr 5s;
}
.move-ttb{
-webkit-animation: movettb 5s;
animation: movettb 5s;
}
@keyframes moveall {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
@keyframes moveltr {
0% { left: 0px; top: 0px;}
50% {left: 200px; top: 0px;}
100% {left: 0px; top: 0px;}
}
@keyframes movettb {
0% {left: 0px; top: 0px;}
50% {top: 200px;left: 0px;}
100% {left: 0px; top: 0px;}
}<div class="box"></div>
<button onclick="allmove()">click</button>
<button onclick="ltr()">click</button>
<button onclick="ttb()">click</button>-
el único problema que veo con esto: si hago clic en cualquiera de los controles de demostración, luego cambio de pestaña, luego vuelvo a cambiar, la animación se reproduce sin hacer clic.
– Will
9 de noviembre de 2021 a las 22:14
marin atanasov
Agrega un
-webkit-animation-play-state: paused;
a su archivo CSS, luego puede controlar si la animación se está ejecutando o no usando esta línea JS:
document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";
si desea que la animación se ejecute una vez, cada vez que haga clic. Recuerde configurar
-webkit-animation-iteration-count: 1;