Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fonctions en Javascript

Fonction en js pour exécuter du CSS

Sujet résolu
JohnOverloord
    22 septembre 2021 à 11:12:35

    Bonjour tout le monde.

        const navSlide = () => {
        const burger =document.querySelector('.burger');
        const nav =document.querySelector('.nav-links');
               
        const navLinks =document.querySelectorAll('.nav-links li');
        burger.addEventListener('click', () => {
            nav.classList.toggle('nav-active');
        });

//le probleme est sans doute ici
        navLinks.forEach((link, index)=>{
            link.style.animation ='navLinkFade 0.5s ease forwards ${index /7 +2}s';
            

        });
     
    }
    
    navSlide();

     Mon code js est au dessus .j'envoi mon code CSS au cas ou.
    @keyframes navLinkFade{
	from{
		opacity: 0;
		transform: translateX(50px);
	}
	to{
		opacity: 1;
		transform: translateX(0px);
	}
}
     Le html donne ca
    <!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible", content="ie-edge">

<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<title>NAVIGATION</title>

</head>
<body>
	<nav>
		<div class="logo">
			<h4>
				The Nav
			</h4>
		</div>
		<ul class="nav-links">
			<li>
				<a href="#">Home</a>
			</li>
			<li>
				<a href="#">About</a>
			</li>
			<li>
				<a href="#">Carreers</a>
			</li>
			<li>
				<a href="#">Test</a>
			</li>
			
		</ul>
		<div class="burger">
			<div class="line1"></div>
			<div class="line2"></div>
			<div class="line3"></div>

		</div>
	</nav>
	<script src="app.js"></script>
    
</body>
</html>
     Merci d'avance


    • Partager sur Facebook
    • Partager sur Twitter
    AbdelrahmenBentahar
      22 septembre 2021 à 11:20:02

      Bonjour,

      Le problème c'est que tu déclare l'animation mais tu la lance pas

      La meilleure option c'est d’exécuter l'animation directement en js

      exemple:

      navLinks.forEach((link, index)=>{
            link.document.getElementById("tunnel").animate([
  // keyframes
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  // more options
  duration: 1000,
  iterations: Infinity
  // etc...
});
             
});



      -
      Edité par AbdelrahmenBentahar 22 septembre 2021 à 11:30:19

      • Partager sur Facebook
      • Partager sur Twitter
      JohnOverloord
        22 septembre 2021 à 13:11:40

        Merci beaucoup. Mais y aurai t-il un moyen de l'exécuter depuis le css en partant du js?

        • Partager sur Facebook
        • Partager sur Twitter
        AbdelrahmenBentahar
          22 septembre 2021 à 16:11:35

          Le meilleure c'est de faire en js.

          Mais si tu veux vraiment le faire en css alors tu dois utiliser les transitions css.

          • Partager sur Facebook
          • Partager sur Twitter
          JohnOverloord

          Fonctions en Javascript

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown