CSS bug: Collapse height transition not working

[melcarthus]

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

[jeffstark]

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.

[jimmyangel]

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

[JulioWar]

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

[dkalpakchi]

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!