web-dev-qa-db-fra.com

Angular ngx-bootstrap collapse n'est pas animé

J'utilise angular 5 et ngx-bootstrap. Ainsi, lorsque j'ai essayé d'ajouter une collpase, en suivant collapse docs , j'ai obtenu un exemple de travail mais sans animation (le replié disparaissait et apparaissait instantanément sans effets).

Alors, y a-t-il un moyen de montrer l'animation?

angularanimationangular5collapsengx-bootstrap
5
Abdenaceur Lichiheb

J'ai eu le même problème et je le résous par une astuce css. Cela a fonctionné pour moi. J'espère que cela fonctionnera pour vous. Cela arrive parce que ngx-bootstrap n'utilise pas la classe ".collapsing", j'ai donc modifié mon code.

#your_nav{
    display: block !important;
    max-height: 1px !important;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
#your_nav.show{
    max-height: 230px !important;
}
3
Irfan

Cela pourrait être une solution pour l'ensemble du projet.

.collapse {
    transition: all 0.3s ease-out;
    display: block !important;
    overflow: hidden !important;
    max-height: 0;
}

.collapse.in {
    transition: all 0.5s ease-in;
    max-height: 9999px; /*any number which is lager than a height of any of your elements*/
}
1
Oleg Polezky