[Bug Report][2.5.7] Transition hide on leave is not applied with d-flex

[Glandos]

Environment

Vuetify Version: 2.5.7
Vue Version: 2.6.14
Browsers: Firefox 88.0
OS: Linux x86_64

Steps to reproduce

Wrap an element with d-flex with a transition that has hide-on-leave
Perform the transition

Expected Behavior

Leaving element is hidden

Actual Behavior

Leaving element is still displayed

Reproduction Link

https://codepen.io/glandos/pen/xxdPOOp

Other comments

See that display:none; on element applied by the transition is overriden by display: flex !important applied by the d-flex class.

[MrLewBrew]

I have the same issue with v-slide-x-transition and v-slide-x-reverse-transition, both using hide-on-leave and nested inside a v-card.

[everttrollip]

@KaelWD after recently updating Vuetify to v2.5.x, I had some strange behaviour when using the v-show directive on an element wrapped with one of the vuetify transition components. For example, consider this,

<v-slide-y-transition hide-on-leave>
  <ct-loading small v-show="loading"></ct-loading>
</v-slide-y-transition>

in versions pre 2.5.x, this custom element ct-loading would only appear if loading is true. In v2.5.x I had to wrap ct-loading with a single top-level element in order for the directive to work properly (Thanks to the hint here)

<v-slide-y-transition hide-on-leave>
  <div>
    <ct-loading small v-show="loading"></ct-loading>
  </div>
</v-slide-y-transition>

I discovered in the release notes of v2.5.10 that for transitions the hideOnLeave display property was made !important (0e5438b). Since this commit ensures display:none; on element applied by the transition is overriden by display: flex !important, the v-show directive as shown in my example above no longer works as expected.

I wasn't sure if this was intentional? Or do I need to create a bug ticket for this issue?

[KaelWD]

Yes please open an issue with reproduction.