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

Fermé

Ryokens Messages postés 2 Date d'inscription mardi 14 mai 2019 Statut Membre Dernière intervention 15 mai 2019 - 14 mai 2019 à 19:06
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;
}
}

A voir également:

Démarrer une Keyframe Css avec un bouton en utilisant JS
Démarrer en mode sans echec - Guide
Pc long a demarrer - Guide
Windows 11 menu démarrer classique - Guide
Comment utiliser un chromecast - Guide
Démarrer un pc à distance - Guide

1 réponse

Réponse 1 / 1

ranma
Modifié le 15 mai 2019 à 01:39

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
Modifié le 15 mai 2019 à 01:40

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 Date d'inscription mardi 14 mai 2019 Statut Membre Dernière intervention 15 mai 2019
15 mai 2019 à 17:29

Merci de votre réponse.

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

ranma
Modifié le 18 mai 2019 à 17:15

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

ne pas utiliser la souris mais le clavier

Impossible de démarrer la ps4

Javascript Arrondi à 2 chiffres après la virgule

Quel est la touche shift sur le clavier