vue-masonry-css icon indicating copy to clipboard operation
vue-masonry-css copied to clipboard

Using with <transition-group>

Open longnt80 opened this issue 7 years ago • 10 comments

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.

longnt80 avatar Dec 24 '17 11:12 longnt80

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

paulcollett avatar Dec 29 '17 00:12 paulcollett

@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>

TheFrankman avatar Jan 31 '18 17:01 TheFrankman

@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?

paulcollett avatar Feb 17 '18 01:02 paulcollett

+1 any solution for this?

mandofever78 avatar Jan 02 '19 22:01 mandofever78

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

ChibiChanNya avatar Jan 08 '19 22:01 ChibiChanNya

UP !!!

Afondevi avatar May 17 '19 09:05 Afondevi

UP !!!

... What's that supposed to mean?

ChibiChanNya avatar May 17 '19 19:05 ChibiChanNya

Hum.. waiting for solution..

Afondevi avatar May 17 '19 20:05 Afondevi

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.

Cweet avatar Jul 10 '19 07:07 Cweet

+1 Any solution for this yet?

TiagoJose avatar Mar 02 '20 18:03 TiagoJose