Démarrer une Keyframe Css avec un bouton en utilisant JS

Ryokens Messages postés 2 Statut Membre -
ranma - 18 mai 2019 à 17:13

Bonjour,

Voila mon problème. Je cherche à démarrer ma Keyframe CSS seulement lorsque j'appuie sur un bouton.
J'ai donc pensé au JavaScript mais malgré ça je n'arrive pas à faire lien avec le bouton et la keyframe.
La keyframe seule fonctionne. Merci d'avance

Voila le Script JS que j'ai utilisé : function log(){
document.getElementById('start').addEventListener("click",
function() {
document.getElementById('login-card').style.animation="blocLog 5s";
});

Et la keyframe Css :

@keyframes blocLog {
from{ top: -1000px;
opacity: 0;
}

to{
top: 10px;
opacity: 1;
}
}

Afficher la suite

A voir également:

Démarrer une Keyframe Css avec un bouton en utilisant JS
Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
Windows ne veut pas démarrer - Guide
Pc long a demarrer - Guide
Diagnostic bouton photo - Accueil - Outils
Impossible de demarrer la ps4 ✓ - Forum PS4

1 réponse

Réponse 1 / 1

ranma

Plusieurs pistes pour vous:
Vous pouvez définir le CSS (de l'animation) directement dans l'événement en inscrivant celui ci, par exemple rien ne vous empêche d'écrire dynamiquement en JavaScript dans la balise style du head(ou ailleurs puisque head est voué à disparaître ):

ranma

document.getElementByTagName('style')[0].innerHTML = document.getElementByTagName('style')[0].innerHTML+' body{background-color:red;}';
/** on attribue une valeur au premier élément style de la page qui utilise son ancien contenu, ici pour l'exemple j'ai indiqué de passer le body en rouge mais on peut bien entendu rajouter toutes les règles CSS que l'on veut comme le @keyframe tant que les id sont correctement remplies au préalables

*/

Plusieurs erreurs dans votre CSS comme dans le JavaScript que vous constaterez en utilisant la console du navigateur:
Vous définissez une animation mais ne l'appliquez pas à un élément, donc rien ne s'animera.
Vous vous trompez dans la notation objet JavaScript:
ceci

document.getElementById('login-card').style
/** indique l'attribut style de l'élément qui a pour ID login-card mais quid d'un objet "animation" appartenant à style? 
Il n'existe pas puisque style attends une chaîne de caractères, celle-ci exprimée en HTML(DOM) par <element id='login-card' style='CONTENU ICI' >...
Donc soit si vous voulez écrire un CSS dans le style c'est comme ceci:
*/
ELEMENT.style='une ou plusieurs règles css ici';
/* ou plus simple encore en utilisant une id ou une classe CSS il suffit d'indiquer celle -ci: */

document.getElementById('login-card').className='nom de classe';
/**-- ici j'utilise l'attribut class(ccessible par className) puisque l'id est déjà définit et sert au sélecteur
Notez qu'il est possible d'avoir plusieurs class pour une balise et que cela doit correspondre à ce que vous définissez pour l'animation
*/

/** 
Où comme vous étiez parti vous pouvez très bien écrire ceci:
*/
document.getElementById('login-card').style='animation blocLog 5s';
//-- attention dans votre code à ne pas mélanger les choux et carottes ou putôt JavaScript et CSS comme vous l'avez fait et surtout regarder vos erreurs dans la console, vous auriez ainsi trouvé rapidement par vous même

Et pour la solution qui change juste la classe (plus simple plus modulaire et plus clair à lire et comprendre quand on reviens sur le code et aussi qui sépare bien le CSS du JavaScript vous devez avoir ceci:


.animationClasse{
  -webkit-animation: blocLog 5s infinite; /* Safari 4.0 - 8.0 */
  animation: blocLog 5s infinite;
}

puis utiliser JS pour définir que l'élément à animer prends la classe(attribut HTML) 'animationClasse' via className comme indiqué ci-dessus.
Plus de détails ici:
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
et là
https://developer.mozilla.org/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_

Ryokens Messages postés 2 Statut Membre

Merci de votre réponse.

J'ai essayé d'écouter vos consignes malgré cela je n'arrive pas à lier les deux.

ranma

pourtant en testant ça fonctionne bien chez moi: créez un bouton , indiquer un événement avec addEventListener et dans la fonction (2ème paramètre) indiquer que l'on change l'attribut class avec .className. Bien sûr la classe à indiquée est celle de l'animation utilisée dans keyframe. JavaScript n'est pas vraiment relié à HTML/CSS en fait il manipule le HTML et CSS existant , peu avoir accès à un peu tout sur la page et rajouter ou modifier des éléments.
Basiquement vous avez à faire ça en utilisant la classe de l'animation qui utilise @keyframe:


<html>
<p id='test'>un test pour ajouter une classe CSS par un bouton JS</p>
<button id='changeclass'>change l'attribut Class du 'p' au dessus<button>
<script>
document.getElementById('changeclass').addEventListener('click',function(){
document.getElementById('test').className='troplaclasse';
alert('l\'attribut class du paragraphe est maintenant: '+document.getElementById('test').className);
});
<script>
</html>

Où est le problème?

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

ne pas utiliser la souris mais le clavier

Bouton ON OFF, O ou I ?

Quel est la touche shift sur le clavier

Impossible de démarrer PS4

Votre réponse

Discussions similaires