Animer une "transition"

Théo Benoit
Javascript

Bonjour,

Je développe un petit site et j'ai réussi à faire ce que je voulais, implémenter une page dans une autre page (un peu comme sur IOS):
je vous montre le code et je vous explique après (code fais par moi-même, donc pas un truc de dingue, mais ça fonctionne, je suis ouvert à toutes critiques, je suis débutant) :

HTML:

<div class="panelWrapper">
    <div id="overview" class="current">
        Overview
    </div>
    <div id="overview" class="hidden">
        Détails
    </div>
    <div id="overview" class="hidden">
        Commande
    </div>
    <div id="overview" class="hidden">
        Profil
    </div>
</div>

CSS:

.hidden{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: none;
  z-index:-1
}

.current{
    z-index: 2;
}

.panelWrapper{
    postion: relative;
    overflow: hidden;
}

JavaScript:

function changeTab($tab1,$tabClass1, $tab2,$tabClass2, $tab3,$tabClass3, $tab4,$tabClass4){

                $($tab1).removeClass('hidden');
                $($tab1).addClass('current');
                // On cherche la tab qui a la class current
                    if($tabClass1 === 'current')
                        {
                            $($tab1).removeClass('current');
                            $($tab1).addClass('hidden');
                        }
                        else if ($tabClass2 === 'current')
                        {
                            $($tab2).removeClass('current');
                            $($tab2).addClass('hidden');
                        }
                        else if ($tabClass3 === 'current')
                        {
                            $($tab3).removeClass('current');
                            $($tab3).addClass('hidden');
                        }
                        else if ($tabClass4 === 'current')
                        {
                            $($tab4).removeClass('current');
                            $($tab4).addClass('hidden');
                        }
    }

    function changeContent(){
            // CHANGE TAB

            // TABS
            tab1 = "#overview"; tabClass1 = $(tab1).attr('class');
            tab2 = "#details";  tabClass2 = $(tab2).attr('class');
            tab3 = "#order";    tabClass3 = $(tab3).attr('class');
            tab4 = "#profil";   tabClass4 = $(tab4).attr('class');

            src = $(this).attr('href');
            // On teste TAB1
            if(src === tab1 && tabClass1 != "current"){
                changeTab(tab1, tabClass1, tab2,tabClass2, tab3,tabClass3, tab4,tabClass4);
            }
            // On teste TAB2
            if(src === tab2 && tabClass2 != "current"){
                changeTab(tab2, tabClass2, tab1,tabClass1, tab3,tabClass3, tab4,tabClass4);             
            }
            // On teste TAB3
            if(src === tab3 && tabClass3 != "current"){
                changeTab(tab3, tabClass3, tab1,tabClass1, tab2,tabClass2, tab4,tabClass4);             
            }
            if(src === tab4 && tabClass4 != "current"){
                changeTab(tab4, tabClass4, tab1,tabClass1, tab3,tabClass3, tab2,tabClass2);             
            }

    })
}

$(document).ready(function(){
    changeContent();
})

Voilà!

Tout marche parfaitement, mais j'aimerais savoir si c'était possible d'ajouter des animations entre le changement, car ça se fait brutalement là, et si vous avez des critiques sur le code n'hésitez pas !

Merci!

3 réponses

etorion
Réponse acceptée

Bonjour,

Comme ça:

.current{

   z_index:2;
   animation: opacityAnim 1s;
}

@keyframes opacityAnim {
  from{
    opacity: 0;
  }
  to{
    opacity:1;
  }
}

Sinon je pense que tu pourrais réduire ton code. Car pour le moment tu n'as que 4 view mais si tu en rajoute, ça va devenir compliqué.

Voici ce que tu peux faire par exmple:

  <div>
  <label>Changement de view</label>
  <select id="selectorView">
    <option value="overview" selected>Oveview</option>
    <option value="details">Details</option>
    <option value="order">Order</option>
    <option value="profil">Profil</option>
  </select>
</div>

<div class="panelWrapper">
    <div id="overview" class="current tab">
        Overview
    </div>
    <div id="details" class="hidden tab">
        Détails
    </div>
    <div id="order" class="hidden tab">
        Commande
    </div>
    <div id="profil" class="hidden tab">
        Profil
    </div>
</div>
.hidden{
  visibility:hidden;
  display:none;
  opacity: 0;
}

.current{
   height:200px;
   width:200px;
   background: #2196F3;
   z-index:2;
   animation: opacityAnim 1s;
}

@keyframes opacityAnim {
  from{
    opacity: 0;
  }
  to{
    opacity:1;
  }
}

.panelWrapper{
    postion: relative;
    overflow: hidden;
}

   function changeView(value){

        $(".current").addClass('hidden');
        $(".current").removeClass('current');

        $("#"+ value).removeClass('hidden');
        $("#"+ value).addClass('current');

    }

$(document).ready(function(){
    $('#selectorView').on('change',function(e){
        changeView(this.value);  
  });
})

@+

Théo Benoit
Auteur

Bonsoir!

Nickel! Merci beaucoup! Je regarderais votre code plus en profondeur quand j'aurais le temps, là je viens de finir de coder pour aujourd'hui, je me suis fais avec ce petit menu, un menu pour les petites résolutions, en bas, avec les 4 icones, et j'aimerais savoir si c'est possible d'imiter le glissement du doigt vers la gauche ou la droite pour changer de page ? ^^

Merci beaucoup de votre aide!

etorion

Oui c'est possible avec une bibliotèque qui gère les swipes etc ..
Pensez à passer ce post en résolu.
@++