Partage
  • Partager sur Facebook
  • Partager sur Twitter

Fonctions en Javascript

Fonction en js pour exécuter du CSS

Sujet résolu
    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
      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
        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
          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

          Fonctions en Javascript

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur
          • Markdown