remplacer DIV par un DIV par effet transition

19 mai 2018 à 20:32:46

bonjour;

j'ai cherche sur le net de la façon de remplacer un bloc div par un autre bloc div sur une même page php par un effet de transition mais je n'ai pas trouve. il ya des exemples durant le survol du bloc par la sourie. malheureusement ce que j'aimerais avoir c0est une transition automatique après un certain délais sans aucun action du visiteur du site.

Merci pour l'aide

-
Edité par hamada66 20 mai 2018 à 18:54:58

Noxon

19 mai 2018 à 20:38:36

setTimeout ou setInterval en Javascript

Ou sinon animation en CSS avec des keyframes qui balance des propriétés display ou opacity à des blocs, mais bon moyen comme méthode.

-
Edité par Noxon 19 mai 2018 à 20:40:27

AliasDmc

20 mai 2018 à 10:01:42

Bonjour hamada_66,

Il existe pour les animations une propriété CSS animation-delay et pour les transitons une propriété CSS transition-delay

qui spécifient le temps de pause avant d'exécution.

Découvrez les Css avec la zonecss.fr

hamada66

20 mai 2018 à 17:35:27

bonjour;

j'ai trouve un code JavaScript pour les méthodes " HIDE" et "SHOW" que j'ai modifie selon mes besoins

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Animated Show Hide Effects</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

</head>
 
   
<script type="text/javascript">
 jQuery(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    
       
        $("#very-slow1").hide(4000);
   
    
    // Show hidden paragraphs with different speeds
   
        
        $("#very-slow2").show(2000);
   
});
</script>

<body>
   
    
    <div id="very-slow1">
	<p>bonjour les amis
	
	</p>
</div>

    <div id="very-slow2">
	<p>bonsoir tous le monde</p>
</div>
	</body>
</html>

ce code parfois marche bien, et parfois non, j'aimerais bien avoir de l'aide pour l’améliorer

Merci

-
Edité par hamada66 20 mai 2018 à 18:56:39

philiga

20 mai 2018 à 18:53:19

Bonsoir,

Pas nécessaire de charger jQuery si c'est seulement pour ça, tu peux le faire en JS simple comme l'a dit Noxon ou, mieux encore, sans aucun JS en pur CSS comme ceci:

Démo: http://jsbin.com/tidoza/1/edit?html,css,output

 #very-slow1{
  border:5px ridge crimson;
  height:150px;
  overflow:hidden;
  animation:animA 1s 2s 3 forwards;
}


@keyframes animA{
  100%{
    height:0;
    visibility:hidden; 
}
}

#very-slow2{
  border:3px solid blue;
}

Explication de la ligne animation:animA 1s 2s 3 forwards;

Le 1er chiffre est la durée de l'animation
Le 2ème, le délai avant qu'elle ne démarre
Le 3ème, le nombre de répétitions
Et forwards permet de rester sur l'état final après l'animation.

NB: display:none; ne semble pas autorisé dans les animations, tu peux mettre border:none; éventuellement sur une 2ème anim suivant la 1ère comme ceci:

#very-slow1{
  border:5px ridge crimson;
  height:150px;
  overflow:hidden;
  animation:animA 1s 2s 3 forwards, animB 1s 5s forwards;
}


@keyframes animA{
  100%{
    height:0;
    /*visibility:hidden;*/ 
}
}

#very-slow2{
  border:3px solid blue;
}

@keyframes animB{
  100%{
    border:none;
  }
}

-
Edité par philiga 20 mai 2018 à 19:14:35

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

remplacement par transition automatique de div par un autre div

Supprimer

Modérer

Signaler le message aux modérateurs