Déclencher des animations CSS via javascript

Je veux déclencher javascript via des animations CSS et vice versa (Javascript pour déclencher CSS).Déclencher des animations CSS via javascript

L'objectif final est d'activer et de désactiver les animations CSS et de les faire déclencher par des fichiers audio importés via l'API Web Audio.

En ce moment je m'intéresse simplement à faire des animations CSS et Javascript se parler.

so ..

J'expérimente dans les navigateurs utilisation exclusive Webkit. Voici un fil de débordement de pile qui semble répondre à la première partie de mon problème: How do I re-trigger a WebKit CSS animation via JavaScript?

Mais je n'arrive pas à faire fonctionner ça.

J'ai ajouté le code que je gratté/modifié ci-dessous

<!--SETUP--> 
<!DOCTYPE html> 
<meta charset="UTF-8"> 
<title>test</title> 
<link rel="stylesheet" href="test.css"> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" charset="utf-8"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> 
<!--END setup--> 



<script src="test.js"></script> 
<div id="box"> shake </div> 
<div id="button"> Button </div>

CSS

#button { 
    width:100px; 
    height:100px; 
    background:blue; 
    position:absolute 

} 

#box{ 
width:100px; 
height:100px; 
background:red; 
position:absolute; 
top:100px; 
left:90%; 
margin-left:100px; 
-webkit-animation: shake 1.5s steps(1) ; 
} 



@-webkit-keyframes shake { 
    0% { 
     left: 0; 
    } 
    25% { 
     left: 12px; 
    } 
    50% { 
     left: 0; 
    } 
    75% { 
     left: -12px; 
    } 
    100% { 
     left:0; 
    } 
}

Javascript

var element = document.getElementById('box'); 

element.addEventListener('webkitAnimationStart', function(){ 
    this.style.webkitAnimationName = ''; // I think css animationName should go here...but not sure. 
}, false); 

document.getElementById('button').onclick = function(){ 
    element.style.webkitAnimationName = 'shake'; 
    // you'll probably want to preventDefault here. 
};

Source

2012-08-07 William

changer au lieu du style de l'élément, ajouter ac nom de lass et avoir une déclaration CSS contenant les transitions CSS que vous voulez utiliser dans cette classe.

Source

2012-08-07 20:51:40

+1 C'est le moyen le plus simple de déclencher une animation CSS. En outre, le plus facile à maintenir. – jfriend00

Déclencher des animations CSS via javascript

Répondre

Questions connexes