JQuery/CSS Transitions : Un moyen plus facile sans utiliser les marges négatives ?

Question

J'ai un projet PhoneGap/Cordova qui m'oblige à utiliser une combinaison de transitions JQuery et CSS pour réaliser des animations (les animations JQuery sont lourdes sur iOS).

J'ai créé un code qui met en œuvre une série de menus déroulants, mais je pense qu'il est mal fait et je cherche des conseils pour l'améliorer.

Ma principale préoccupation concerne le positionnement des divs, notamment l'utilisation de marges négatives.

Si je modifiais la longueur d'un div, tout serait désaligné. Je dois appliquer une marge négative (margin-top) pour que les div s'affichent en haut de l'écran, sinon ils se retrouveraient en bas de l'écran comme s'ils avaient été chargés normalement, l'un après l'autre.

De plus, il y a beaucoup d'espace blanc en bas de la page, là où se trouvent les divs. supposée d'être, si la traduction ne leur avait pas été appliquée.

CSS :

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
}

JQuery :

$('#clickme1').click(
                      function() {
                      $('#dropdiv1').css('-webkit-transform','translate(0, -335px)');
                      });

  $('#clickme2').click(
                        function() {
                        $('#dropdiv2').css('-webkit-transform','translate(0, -2335px)');
                        });

  $('#clickme3').click(
                        function() {
                        $('#dropdiv3').css('-webkit-transform','translate(0, -3300px)');
                        });

Answer 1

J'ai apporté quelques modifications au css - en ajoutant position : absolute et un z-index aux #dropdivs. Cela résout le problème de l'empilement des divs les uns sur les autres. J'ai ensuite positionné chaque div sous son div/bouton #clickme respectif afin que, lorsqu'il apparaisse, il soit correctement positionné.

Le seul point négatif est que j'ai dû régler la hauteur de ma page pour qu'elle puisse accueillir le #dropdiv le plus haut lorsqu'il est affiché, sinon le bas de la page le couperait.

Mon code :

<div id="bigcontainer">
    <ul class="mainmenu">
     <li><a id="clickme1" href="#">Click Me 1</a></li>
                    <div class="showdata"  id="dropdiv1">
                        Lots of random text....
                </div>
 <li><a id="clickme2" href="#">Click Me 2</a></li>
                <div class="showdata"  id="dropdiv2">
                    Lots of random text....
                </div>     
 <li><a id="clickme3" href="#">Click Me 3</a></li>
                <div class="showdata"  id="dropdiv3">
                   Lots of random text....
                </div>
</ul>
</div>

CSS :

#bigcontainer {
height: 1500px;/*as big as the bigest dropdiv to enable scrolling*/
}    

#dropdiv1 {
    -webkit-transform: translate(0, -3000px);
    -webkit-transition: all ease-in 1s;
    z-index: 1;
    position: absolute;
}

#dropdiv2 {
    -webkit-transform: translate(0, -3400px);
    -webkit-transition: all ease-in 1s;
    z-index: 2;
    position: absolute;
}

#dropdiv3 {
    -webkit-transform: translate(0, -4200px);
    -webkit-transition: all ease-in 1s;
    z-index: 3;
    position: absolute;
}