Animación CSS onClick

¿Cómo puedo obtener una animación CSS para jugar con un JavaScript onClick? Actualmente tengo:Animación CSS onClick

.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?

Fuente

2011-01-31 tekknolagi

¿Estás seguro de que solo muestras tu página en el kit web? Aquí está el código, aprobado en safari. La imagen (id='img') girará después de hacer clic en el botón.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
.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); 
    } 
} 
</style> 
<script type="text/javascript"> 
    function ani(){ 
    document.getElementById('img').className ='classname'; 
    } 
</script> 
<title>Untitled Document</title> 
</head> 

<body> 
<input name="" type="button" onclick="ani()" /> 
<img id="img" src="clogo.png" width="328" height="328" /> 
</body> 
</html>

Fuente

2011-01-31 15:34:18 Shisoft

Solo tenga en cuenta que el uso de '.className' borrará todas sus otras clases en el elemento dado. Si esto no se desea, use 'document.getElementById ('img'). ClassList.add ('classname');' –

Usted puede lograr esto mediante la unión de un oyente onclick y después de adquirir esta clase animado como esto:

$('#button').onClick(function(){ 
    $('#target_element').addClass('animate_class_name'); 
});

Fuente

2011-01-31 06:12:16

que es jQuery aunque ... y que no entiendo lo que hace. una respuesta más completa será recompensada con un voto positivo y una aceptación, ya que claramente lo necesita. – tekknolagi

Básicamente, lo que le está diciendo a jQuery es lo siguiente: Primera línea: jQuery se dirige al elemento que tiene ID de botón y crea una función para cuando el usuario hace clic en el elemento. Segunda línea: este es el elemento que se verá afectado por el clic. Se dirige al elemento con una identificación de elemento_destino y agrega la clase nombre_clase_animato a ese elemento. Confíe en mí, esta solución funciona, la he usado en el pasado. –

sólo tiene que utilizar el :active pseudo-class. Esto se establece cuando haces clic en cualquier elemento.

.classname:active { 
    /* animation css */ 
}

Fuente

2011-01-31 06:17:47

Ah, he entendido mal su pregunta. Creo * que la respuesta de Ravi funcionará para ti en ese caso. –

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. – adg

-2

Prueba esto:

<div> 
<p onclick="startAnimation()">Start</p><!--O botão para iniciar (start)--> 
<div id="animation">Hello!</div> <!--O elemento que você quer animar--> 
</div> 

<style> 
@keyframes animationName { 
from {margin-left:-30%;} 
} 
</style> 

<script> 
function startAnimation() { 
    document.getElementById("animation").style.animation = "animationName 2s linear 1"; 
} 
</script>

Fuente

2016-05-19 14:56:08

Añadir un

-webkit-animation-play-state: paused;

a su archivo CSS, entonces se puede controlar si la animación se está ejecutando o no por el uso de este JS línea:

document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";

si desea una imation para ejecutar una vez, cada vez que haga clic. Recuerde que debe establecer

-webkit-animation-iteration-count: 1;

Fuente

2016-08-01 12:14:52 NoteTheNote

puede hacerlo mediante el uso siguiente código

$('#button_id').on('click', function(){ 
$('#element_want_to_target').addClass('.animation_class');});

Fuente

2017-05-16 07:26:22 Junaid

Respuesta

Cuestiones relacionadas