Transformer les transitions ne fonctionne pas lorsqu'il est combiné avec des changements de largeur

voix
0

Je travaille sur ce menu mobile où vous pouvez développer et réduire les différentes catégories. Ce faisant, une animation de glissement doit être effectuée sur le sous-menu expansé (lors de l'expansion) ou dans le menu de niveau supérieur (lorsque l'effondrement).

La structure du HTML est le suivant:

<div class=slideOpenMainMenu>
    <div class=sideMenuGeneral>
        ...Top-level menu...
    </div>
    <div class=sideMenuPanelMainChildren>
       ...Expanded submenu...
    </div>
</div>

En ajoutant et en supprimant les classes, je montre la div appropriée , tout en cachant l'autre de la vue. Comme vous le remarquerez, je sors de ma façon de ne pas utiliser quoi que ce soit comme display:none;depuis, je ne serai pas capable d'animer les conteneurs. Au lieu de cela , j'utiliser une combinaison de largeur, la hauteur, la visibilité et les propriétés flexibles pour masquer et afficher les conteneurs.

/* Menu parent container */
.slideOpenMainMenu {
  position: fixed;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, #12416e 0%, #0d3050 100%);
  display: flex;
  justify-content: center;
}

/* Top-level menu - Initial state */

.sideMenuGeneral {
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-flow: column;
  padding: 20px 16px 0 16px;
  box-sizing: border-box;
  overflow: hidden;
}

/* item submenu - Initial state */

.sideMenuPanelMainChildren {
  width: 0;
  height: 0;
  flex: 0 1 0;
  max-height: 100vh;
  overflow: hidden;
  visibility: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Top-level menu - Expanded state */

.slideOpenMainMenu.item-expanded .sideMenuGeneral {
  width: 0%;
  padding: 0 !important;
  visibility: hidden;
}

.slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
  flex: 1 1 auto;
  flex-flow: column;
  width: 100%;
  height: auto;
  overflow: scroll;
  visibility: visible;
}

Pour l'animation, je l' utilise transform:translateYet opacitypropriétés pour créer l'effet de glissement que je veux.

/* Initial state */
.slideOpenMainMenu .sideMenuPanelMainChildren {
    opacity: 0;
    transform: translateX(30%);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
}

.slideOpenMainMenu .sideMenuGeneral {
    opacity: 1;
    transform: translateX(0%);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
}

/* Expanded state */

.slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
    opacity: 1;
    transform: translateX(0%);
}

.slideOpenMainMenu.item-expanded .sideMenuGeneral {
    opacity: 0;
    height: 0px;
    transform: translateX(-50%);
}

Comme vous pouvez le voir sur ce violon , l'animation fonctionne bien dans Chrome et Firefox. Pas si bien sur Webkit et Edge. D'après ce que je peux dire, il semble y avoir une sorte de conflit entre le changement de largeur et les transitions, parce que quand je désactive les changements de largeur, vous pouvez voir l'animation jouer. Ce qui pourrait provoquer le changement de comportement entre les plates - formes? Est - il possible de séquencer correctement les changements?

Créé 27/11/2018 à 15:07
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

Donc, en écrivant cette question, je suis arrivé à la réponse (comme cela arrive souvent). La question semble être enracinée dans ce que la séquence des changements de propriété CSS est différent sur les différents navigateurs. en ajoutant un petit retard (0.01s) à la transformation transition, je l'ai eu à travailler, comme suit:

transition: opacity 0.3s ease, transform 0.3s ease 0.01s, visibility 0s ease;

, Je trouve toujours cela un peu étrange et intéressant. Si quelqu'un a des infos sur la façon dont ces choses sont séquencées dans le navigateur qui serait vraiment génial d'apprendre.

Créé 27/11/2018 à 15:07
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more