Using with <transition-group>

[longnt80]

How do I use this with transition-group? I tried with masonry as the component:

<transition-group tag="masonry"

but the gutter didn't work, the cols didn't have the gutter as defined.

[paulcollett]

This would be a great feature @longnt80.

I originally couldn't get <transition-group> working without a more thorough understanding of vue's renderer and workarounds. I haven't seen the tag="*component*" approach before but this might be worth exploring as a solution without a lot of workarounds

[TheFrankman]

@paulcollett - I too got it working using the component tag but that meant that set cols doesn't work. Any chance you got anywhere with resolving this. This is my first Laravel/Vue project so I can't offer much help.

<transition-group name="items" tag="masonry">
                <div class="item" v-for="(item, index) in items" :key="index">
                    <img v-show="item.show" :src="item.src">
                </div>
</transition-group>

[paulcollett]

@TheFrankman no new update from me as of yet but still thinking this would be a good addition to look into. How did you get on?

[mandofever78]

+1 any solution for this?

[ChibiChanNya]

+1 I am having lots of issues animating Vuetify cards using this.

[Afondevi]

UP !!!

[ChibiChanNya]

UP !!!

... What's that supposed to mean?

[Afondevi]

Hum.. waiting for solution..

[Cweet]

Hi all!
I made a solution that works pretty nicely for me, so I figured I'd share until the bug is fixed :) Instead of using transition groups I use the normal transition element.

So I have to wrap each element inside the for-loop with the transition. This means I can't put any styling on the loop-element, and I have to put styling on the inner elements instead. So you'll need an extra wrapper for this.

<masonry class="image-grid" :cols="4" :gutter="30" >
    <div class="images-item" v-for="(image, index) in images" :key="image.id" :data-index="index" :data-id="image.id">
        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" appear>
            <div class="frame"><img :src="image.url" /></div>
        </transition>
    </div>
</masonry>

I used .js animation instead of classes. Then I set an index in my data array and I increase that on the enter hook to delay the animation of each item.

enter: function (el, done) {
    var delay = 100 * this.index;
    this.index = this.index + 1;
    
    setTimeout(function () {
            Velocity(
               el, 
               { opacity: 1 ,
               transform: ["scale(1)", "scale(0.9)"] },
	    );
    }, delay );

}

Unfortunately I don't have a demo to show, as I am working locally right now.. but it works fine on my side with both the transitions and the columns.

Hope this helps someone!

Just an fyi: my particular case was an image gallery, so I also had some functions for rendering the image before animation, but I took it out of the example to stay on topic. So this example would have laggy images.

[TiagoJose]

+1 Any solution for this yet?