Vuetify’s v-expand-transition without v-show/v-if?

  css, javascript, vue.js, vuetify.js

Is there anyway to animate a div, with Vuetify’s expand-transition, without it being hidden in the first place?

The expand-transition and all transitions in vuetify demands that the element that is given the animation is hidden initially.

The component that I want to use expand-transition on grows in size dynamically. In my case, there is text inside a div that grows dynamically. When text is added to the already existing text, I want the div to expand with the animation that v-expand-transition gives.

Any ideas how this can be done?
One lazy and not good CSS-solution I found was to do something like this:

.text-wrapper {
    max-height: 150px;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    &.expanded {
        max-height: 500px;
    }
}

This is not the way I want to go! If I can instead use the vuetify library to achieve something similar I would be much happy!

Source: Ask Javascript Questions

LEAVE A COMMENT