CSS bug: Collapse height transition not working

[Tim Wolf]

On Bulma 0.9.3.
Installed bulma-collapsible via Yarn.
Collapsing does not transition, expanding does work.

[Jeff Stark]

Same issue here. To expand on this, the close animation does work, but only if you close it before the opening animation completes. Once the opening animation completes, the close animation does not work.

[Ricardo Morin]

I am observing exactly the same issue. Any clues about what may be causing it?

[Julio Guerra]

Hi there, I noticed this issue and I think there are changes that haven't been published to NPM or Yarn.
I managed to get around the issue by doing this:

const collapsableElement = document.getElementById('to-collapse');
const bulmaCollapsibleElement = new bulmaCollapsible(collapsableElement);
bulmaCollapsibleElement._originalHeight = collapsableElement.scrollHeight + 'px'

Let me know if this fix work for you guys

[Dmytro Kalpakchi]

Hi everyone, and thanks @JulioWar! Building on top of your fix, it might be better to call this fix every time upon expanding:

const collapsibles = bulmaCollapsible.attach();
  
collapsibles.forEach(function(instance) {
   instance.on('after:expand', function() {
      instance._originalHeight = instance.element.scrollHeight + 'px';
   }); 
});

Seems to work for me and hopefully for anyone else encountering the issue!