Animazione di chiusura assente su accordion/collapse con ng build

[g-contaldi]

Comportamento atteso

Sui componenti it-accordion e it-collapse, ma anche su qualsiasi elemento custom expand/collapse, mi sarei aspettato l'animazione anche alla chiusura, come avviene all'apertura.

Comportamento attuale

Nessuna animazione presente alla chiusura di accordion/collapse, se fatto ng build sull'applicazione.

Possibili soluzioni

// from bootstrap scss .collapsing { height: 0; overflow: hidden; @include transition($transition-collapse); }

La classe .collapsing viene correttamente aggiunta in chiusura. Penso che il problema risieda nel fatto che l'elemento non avendo un height settato, non ha un punto di partenza per arrivare a 0, e quindi non applica la transition.

L'animazione in chiusura torna a funzionare se imposto un height all'elemento con la classe collapse, ma non può essere la soluzione.

Contesto

Il bug non si presenta se uso l'applicazione che consuma la libreria in locale (ng serve in localhost), dove quindi l'animazione funziona sia in apertura che in chiusura. Si presenta invece se faccio la build (build in locale consumata con http-server, ma anche sui vari ambienti sviluppo/collaudo ecc). Insomma se l'applicazione è buildata, non funziona l'animazione di chiusura su qualsiasi elemento expand/collapse. Il bug si presenta anche sulla vostra documentazione, ma non su quella di bootstrap italia o bootstrap.

[astagi]

Grazie @g-contaldi verifichiamo quanto prima

[alenap93]

@astagi penso che il problema sia dovuto al flag optimization nell'angular.json. Se questo è a true ottimizza sia script che stili che font e, ottimizzando gli script di bootstrap-italia, rompe qualcosa. Al volo possiamo mettere per prod:

    "optimization": {
      "fonts": true,
      "scripts": false,
      "styles": true
    },

disabilitando l'ottimizzazione degli script, ma penso sia meglio portare dentro le animazioni gestendole con angular animations.

[astagi]

Grazie @alenap93 , chiamo in causa anche @AntoninoBonanno per la questione

[AntoninoBonanno]

Sinceramente non ho mai disabilitato l'ottimizzazione degli script. Se disabilitando questa opzione si disabilita anche l'ottimizzazione del codice Angular, sarebbe meglio gestire l'animazione e il comportamento del componente direttamente in Angular

[g-contaldi]

Ho fatto un test con quanto suggerito da @alenap93 e cambia di parecchio il bundle size.

Con "optimization": true

Initial Chunk Files           | Names                                              |  Raw Size | Estimated Transfer Size
styles.11b11c66adc75da0.css   | styles                                             | 603.88 kB |                70.42 kB
main.cfce21951aa8ae78.js      | main                                               | 466.09 kB |               121.60 kB
polyfills.bb7639fc28d9e3bf.js | polyfills                                          |  33.07 kB |                10.66 kB

                              | Initial Total                                      |   1.08 MB |               202.68 kB

Con "optimization": { "fonts": true, "scripts": false, "styles": true }

Initial Chunk Files           | Names                                              |  Raw Size | Estimated Transfer Size
main.c823a0157224e7ae.js      | main                                               |   2.48 MB |               451.16 kB
styles.11b11c66adc75da0.css   | styles                                             | 603.88 kB |                70.42 kB
polyfills.cd09a33028a7f9c7.js | polyfills                                          | 105.81 kB |                20.90 kB

                              | Initial Total                                      |   3.17 MB |               542.48 kB

Direi quindi non è una strada percorribile, ma comunque risolverebbe il problema; disabilitando l'optimization per gli script tornano a funzionare le animazioni. Quindi immagino come suggerito l'azione migliore sarebbe gestire le animazioni in Angular

[g-contaldi]

Nel frattempo ho continuato a studiare la problematica, ed è un problema noto di integrazione di Bootstrap con Angular, di cui non è mai stata data una vera soluzione. Qui alcuni workaround suggeriti. L'unica vera soluzione che sembra non essere affetta dal problema, ma che non ho mai avuto il tempo di provarla, potrebbe essere quella di usare la direttiva [(ngCollapse)] dal package ngBootstrap al posto del "data-bs-toggle" nativo. Non so se avete voi modo e tempo di effettuare alcuni test, sempre che sia una strada percorribile quella di rimpiazzare attributi nativi di bootstrap con ngBootstrap.

[astagi]

Nel frattempo ho continuato a studiare la problematica, ed è un problema noto di integrazione di Bootstrap con Angular, di cui non è mai stata data una vera soluzione. Qui alcuni workaround suggeriti. L'unica vera soluzione che sembra non essere affetta dal problema, ma che non ho mai avuto il tempo di provarla, potrebbe essere quella di usare la direttiva [(ngCollapse)] dal package ngBootstrap al posto del "data-bs-toggle" nativo. Non so se avete voi modo e tempo di effettuare alcuni test, sempre che sia una strada percorribile quella di rimpiazzare attributi nativi di bootstrap con ngBootstrap.

ciao @g-contaldi per la prossima release vediamo di testare questa soluzione, scusa il ritardo ma siamo stati impegnati in una pesante review di accessibilità.. grazie infinite! cc @AntoninoBonanno

[AntoninoBonanno]

Sconsiglierei di integrare ngBootstrap nella libreria poichè appesantirebbe la libreria di funzionalità non necessarie o duplicate.

Si potrebbe pensare di implementare [(ngCollapse)] in bootrstrap-italia