web-dev-qa-db-fra.com

ng-bootstrap collapse: Comment appliquer des animations?

J'utilise Collapse: https://ng-bootstrap.github.io/#/components/collapse

Cependant, cela n'anime pas; même pas sur le site de démonstration. Comment devrais-je implémenter ceci?

angularng-bootstrap
7
Boland

Parce qu'ils utilisent "display: none" pour masquer et "display: block" pour afficher un élément, vous ne pouvez pas appliquer la propriété CSS "transition".

Donc, forcez le bloc d’affichage, gérez la hauteur et l’opacité pour afficher/masquer:

.collapse, .collapse.in {
  display: block !important;
  transition: all .25s ease-in-out;
}

.collapse {
 opacity: 0;
 height: 0;
}

.collapse.in {
  opacity: 1;
  height: 100%;
}

Avec une transition de base et une opacité/hauteur, il semble être plus lisse.

Vous pouvez créer votre propre animation avec une image clé et l’appliquer à .collapse.in pour obtenir une meilleure expérience de masquage/affichage.

Et puis, si vous utilisez Angular 2 dans votre projet, vous pouvez passer à ng2-bootstrap: http://valor-software.com/ng2-bootstrap/

7
Robin Meillet

vous pouvez ajouter à l'intérieur de votre composant comme ceci:

 animations: [
    trigger('expandCollapse', [
                state('open', style({height: '100%', opacity: 1})),
                state('closed', style({height: 0, opacity: 0})),
                transition('* => *', [animate('100ms')])
            ]),
 ]


 <div [ngbCollapse]="isCollapsed" [@expandCollapse]="isCollapsed ? 'closed' : 'open'"> ... </div>

Voir plus de détails ici https://angular.io/guide/animations#animating-a-simple-transition

2
Rammgarot