Nordidi13 Posted June 3, 2019 Share Posted June 3, 2019 Bonjour, config presta : 1.6.1.13 Alors, je n'ai jamais vu ça de ma vie ... je vais vous expliquer le problème. J'ai une div (comedown) qui agit comme volet déroulant de bas en haut laissant apparaître 4 liens grâce a un onclick sur un bouton. voici le css de ma div : #comedown { background-color: #ff5354; position: absolute; right: 0; left: 0; top: 850px; width: 100%; height: auto; margin: auto; will-change: transform; z-index: 11; height: 750px; overflow: hidden; display: none; transition: top 1.5s; -webkit-transition: top 1.5s; } J'y est ajouté ce code JS : <script> function masquer_div() { if (document.getElementById('comedown').style.top == '100%') { document.getElementById('comedown').style.top = '0'; } else { document.getElementById('comedown').style.top = '100%'; } if (document.getElementById('comedown').style.display == 'none') { document.getElementById('comedown').style.display = 'block'; } else { document.getElementById('comedown').style.display = 'none'; } } document.getElementById('btn_back').onclick = masquer_div; document.getElementById('btn_show').onclick = masquer_div; document.getElementById('btn_effect').onclick = masquer_div; </script> Ce que je souhaite obtenir c'est un volet déroulant vers le haut qui arrive en 1.5 seconde. Alors sur le onclick de mon bouton tout fonctionne, je passe effectivement de top 100% a top 0 et de même pour le display. En revanche en ce qui concerne la transition... lorsque je suis sur l'inspecteur pour vérifié que le code est bien accepté et que je click sur le bouton, la transition se fait en 1.5secondes et nous avons bien cet effet de "volet déroulant" mais quand je suis sur la page et que l'inspecteur n'est pas afficher et que je click, plus aucune transition mais la div qui apparaît instantanément en haut de la page... Merci d'avance Link to comment Share on other sites More sharing options...
doekia Posted June 3, 2019 Share Posted June 3, 2019 Quand je parlais d'un autre forum je parlais d'un forum spécialisé CSS/JS genre https://www.alsacreations.com/ Encore une fois aucun rapport avec une difficulté liée à prestashop Mais pour moi un transition css ne s'applique que de règle css à règle css (peut-être je me trompe). Si tu manipule le style de l'object DOM directement, aucune transition n'intervient Link to comment Share on other sites More sharing options...
Nordidi13 Posted June 3, 2019 Author Share Posted June 3, 2019 d'accord merci à toi, tu n'a pas d'explication à pourquoi cela fonctionne quand j'ai l'inspecteur ouvert ?? Link to comment Share on other sites More sharing options...
Eolia Posted June 3, 2019 Share Posted June 3, 2019 regarde du côté de slideUp() et slideDown() https://www.w3schools.com/jquery/jquery_ref_effects.asp l'inspecteur modifie la gestion des css/js vu qu'il essaye de les interpréter en avance/mémoire pour les gérer en dynamique (surcouche js de ton navigateur) Link to comment Share on other sites More sharing options...
Nordidi13 Posted June 3, 2019 Author Share Posted June 3, 2019 Je pense que tes sources sont bonnes, mais je n'arrive malheureusement pas à l'adapter à mon code Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now