Jump to content
Nordidi13

Transition css et js qui ne fonctionnent que en inspecteur

Recommended Posts

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>

 

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

Edited by Nordidi13 (see edit history)

Share this post


Link to post
Share on other sites

Il n'existe pas un moyen de gérer cette transition directement dans le code JS ?

Share this post


Link to post
Share on other sites

Top 100% ? ça n'a pas de sens

Je te traduis ce que ça veux dire ... dans une page virtuellement infinie, le haut du truc que j'affiche sera à 100% !

Si ma page fait 4km je mets le haut à +4km et mon truc prenant de la place rend la page 4km+quelque chose ... du coup il faut déplacer le truc à 4km+quelque chose ... ad-libidum

 

Share this post


Link to post
Share on other sites

Merci de ta réponse, j'ai modifié le top a 850px pour le déplacer en dessous d'une image en background de 850 de haut.

Malheureusement le problème est le même.

quand j'appui sur un bouton avec inspecteur allumé, la transition se fait en 1.5s, mais quand j'appui sur le bouton avec l'écran normal, aucune transition la div apparaît d'un coup ...

Share this post


Link to post
Share on other sites

Si quelqu'un a une proposition différente de celle que j'utilise pour faire marcher la transition je suis preneur :)

Share this post


Link to post
Share on other sites

moi au final je comprends pas ce que tu veux faire. ton js par exemple il ne fait aucune transition.

donc normal que tout soit instantané

Pose ta question plutot sur un forum css/js car là ça n'a pas grand chose a voir avec prestashop

 

Share this post


Link to post
Share on other sites

C'est normal la transition est faites en css sur le #comedown mais tu as raison je suis peut être au mauvais endroit !

Merci

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More