Animation only plays for initial open of dropdown

[billdami]

When enabling CSS3 Animation-based open/close animations for dropdowns, it appears that only the "transitioning in" animation plays correctly for the dropdown, and that itself only plays correctly on the initial open, for each dropdown instance.

After that, the dropdown shows/hides immediately on open/close with no animation/transition.

Here is the SASS I am currently using to enable animations (based on the Animations doc example css):

@keyframes drop-fade-below {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes drop-fade-above {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.ember-basic-dropdown {
  &-content {
    // When opening below the trigger
    &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
      animation: drop-fade-below 0.25s;
    }
    &.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
      animation: drop-fade-below 0.25s reverse;
    }

    // When opening above the trigger
    &.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
      animation: drop-fade-above 0.25s;
    }
    &.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
      animation: drop-fade-above 0.25s reverse;
    }
  }
}

This issue is also present on the documentation site on the "Animations" page, tested on latest version of Chrome (Mac and Windows) as well as Mac Safari and Mac Firefox:

https://ember-basic-dropdown.com/docs/animations/
(as well as the ember-power-select animations doc page: https://ember-power-select.com/cookbook/css-animations/)

[Jakeii]

I've dones some investigations into this, it seems the will-destroy modifier is not being called until after the dropdown is removed from the dom, which breaks the first transition out and the classes for subsequent transitions.