VueJS 3 transition-group control parent size

Question

I have a group of elements showing/hiding/rearranging with a transition group, nothing fancy.

.cross-fade-leave-active {
    transition: transform $fadeSpeed ease-in-out, opacity $fadeSpeed ease-in-out;
    position: absolute;
}
.cross-fade-enter-active {
    transition: opacity $fadeSpeed ease-in-out $fadeSpeed;
}
.cross-fade-enter-from,
.cross-fade-leave-to {
    opacity: 0;
}  
.cross-fade-move{
    transition: transform $fadeSpeed ease-in $fadeSpeed, opacity $fadeSpeed ease-in-out;
}

This works well except in situations where the dynamic height parent container is part of a flow of elements. The parent immediately snaps to the Last stage of the FLIP animation, while the contents of the transition-group smoothly do their thing.

While functionally it makes sense why it's happening, it's far from ideal.

Is there a straightforward way to hook into the Vue FLIP animation to grab the First and Last properties of the parent, so I can set the max height for transition?

My attempt

<div :ref="`container${i}`" :style="{'max-height': containers[`container${i}`]}">
    <transition-group name="cross-fade"
    @after-enter="clearMaxHeight(`container${i}`)" 
    @after-leave="clearMaxHeight(`container${i}`)" 
    @before-enter="maxHeight(`container${i}`)" 
    @enter="maxHeight(`container${i}`)" 
    @before-leave="maxHeight(`container${i}`)" 
    @leave="maxHeight(`container${i}`)"
    >
    //...conditional elements
    </transition-group>
</div>

maxHeight(ref){
    let container = this.$refs[ref];            
    this.containers[ref] = container.clientHeight + 'px';
},
clearMaxHeight(ref){
    this.containers[ref] = 'none';
},

I would think, in theory, that before-enter or before-leave would capture the height of the element before the transition, which would lock in the First height of the parent. Then enter or leave would capture the new immediately after the elements have been added/removed from the flow, giving the Last height. Finally, when the animations are done, just set max height back to none so it can behave normally.

But this doesn’t work like that. Even with the transition pumped up to 5s, I see max-height getting set to a number for a split second, then immediately back to 'none'. Maybe I misunderstand the lifecycle of the Vue animation hooks, but the docs seem a little sparse on the exact execution.

Is your goal to animate the height, or just keep it the same? I presume that since you are adding and removing elements, you would want to prevent the parent from growing or shrinking immediately? — Caleb Weeks, Feb 12 '22 at 14:39
My goal is to animate it, so set max-height during the First and Last parts of the vue FLIP animation. — Randy Hall, Feb 12 '22 at 17:51
I've been playing around with this the past few days because I needed to do something similar. I got something working for my use case, but I don't think it will work for yours. The short answer is that the transition hooks don't allow you to hook into the FLIP measurements. — Caleb Weeks, Feb 18 '22 at 14:16
The order of events for entering are 1) `before-enter` 2) render the item 3) `enter` 4) play the animation 5) `after-enter`. Unless you know the height of the item before it is rendered, you won't be able to animate the parent height to exactly the correct height. — Caleb Weeks, Feb 18 '22 at 14:19
If it's good enough, you can use these hooks to set the max-height to the current height plus a value that is larger than the item. If the items are different heights, the animations will have different durations/easings. — Caleb Weeks, Feb 18 '22 at 14:21

score 0 · Answer 1 · answered Feb 23 '22 at 03:38

Disclaimer

It's a little buggy, but I think there may actually be an issue with transition-group (or undocumented feature that's trying and failing to do this very thing). Basically, some elements outside the transition-group container are most definitely getting transform matrices and -move classes added to them by something in Vue in reaction to this, which is annoying.

However, this does basically do what I set out to do originally, maybe you can improve it. Or maybe I'll dig into the Vue3 source code and force it to behave.

Setup:

    const firstAni = {};
    const aniContainer = {};
    
    const aniFirst = (i) => {
        let container = aniContainer[i];
        firstAni[i] = container.offsetHeight;
    };
    const aniLast = (i) => {
        let container = aniContainer[i];
        let lastAni = container.offsetHeight;

        const aniClear = (e) => {
            if(e.target !== container){
                return false;
            }
            container.removeEventListener('transitionend', aniClear);
            container.removeEventListener('transitioncancel', aniClear);
            container.style.height = 'auto';
        };

        container.style.height = `${firstAni[i]}px`;
        
        container.addEventListener('transitionend', aniClear);
        container.addEventListener('transitioncancel', aniClear);

        nextTick(() => {
            container.style.height = `${lastAni}px`;
        });
    };
    const setAniRef = (el, i) => {
        aniContainer[i] = el;
    };

The template:

<div class="cross-fade-wrapper" :ref="(el) => setAniRef(el, i)">
    <transition-group name="cross-fade"
        @before-enter="(el) => aniFirst(i, el)"
        @before-leave="(el) => aniFirst(i, el)"
        @enter="(el, done) => aniLast(i, el, done)"
        @leave="(el, done) => aniLast(i, el, done)"
    >
    <!-- all the conditional elements -->
    </transition-group>
</div>

Style it up:

$fadeSpeed: 0.1s;
.cross-fade-wrapper{
    position: relative;
    transition: height $fadeSpeed ease-out;
}
.cross-fade-leave-active {
    transition: opacity $fadeSpeed / 2 ease-out;
    position: absolute;
}
.cross-fade-enter-active {
    transition: opacity $fadeSpeed / 2 ease-in $fadeSpeed * 0.8;
}
.cross-fade-enter-from,
.cross-fade-leave-to {
    opacity: 0;
}  
.cross-fade-move{
    transition: transform $fadeSpeed ease-out;
}

Basically per FLIP, sorta:

Set a reference to the container.
Get the container's height before the enter/leave happens (First).
Get the container's height again immediately when enter/leave starts (Last), then set the height of the container to the First value.
Next tick, set the container's height to the Last value.
Let the animation do its thing.
When animation is finished (watched via listeners) set the container height back to auto.

VueJS 3 transition-group control parent size

1 Answers1