J'ai un composant de barre latérale que je voudrais animer dedans et dehors avec une transition. J'utilise transformer translateX (voir CSS ci-dessous).La transition de la vue ne fonctionne pas avec la position: fixe
Cependant, le menu ne s'anime pas correctement. Il fonctionne très bien quand je me débarrasse de la propriété css position: fixed sur le composant, cependant, cela ne lui donne pas l'air d'un sidemenu (il n'est pas correctement positionné sur l'écran). Avec la position fixée, cela fonctionne sauf que la couleur d'arrière-plan et la position du sidemenu div (et des éléments qui le composent) ne sont pas finalisées avant la fin de l'animation.
Donc, il semble grossier. J'ai examiné partout et trouvé des problèmes similaires ici, mais rien qui m'a conduit à une solution autre que d'utiliser les composants pré-construits d'autres peuples. (Je voudrais éviter de faire cela.)
Voici mon html (de composant parent) en vue chargeur de webpack: -
<transition name="slide">
<app-menu v-if="menuToggled"
:untoggle="toggleSidebar">
</app-menu>
</transition>
Voici le CSS du sidemenu pour la div:
.menu {
position: fixed; top: 0; left: 0; bottom: 0; right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: black;
padding: 10px;
margin-right: 40px;
text-align: center;
}
Merci! C'est ma première question sur StackOverflow. J'espère que je ne perds pas mon temps ici. J'apprécie beaucoup les conseils constructifs de toute forme.
Pourriez-vous poster le CSS de l'animation, peut-être même le composant entier? Quelque chose comme Gistub Gist serait bien, cela rendrait un peu plus facile. –
Merci ... Je vais travailler dessus mais je suis aussi un débutant Github. Je vais vérifier une fois que je fais cela ou résoudre le problème. – Rob
Voici le composant entier dans un GistHub: https://gist.github.com/robertjoellewis/dfa66f149b8a3bfb5c9d112330ea1564 – Rob