Cannot trigger automatically after reset when used transition feature in list

[PeachScript]

The following content was from here：

One a side note, when you do this

changeFilter() { this.list = []; this.$nextTick(() => { this.$broadcast('$InfiniteLoading:reset'); }); },

if you have a stagger transition on your for item like v-for="item in list" transition="bounce" stagger="100" the data will not auto reload on change like your demo, you must scroll

via @packytagliaferro

[PeachScript]

The $nextTick just detect the next DOM update, but the items didn't be removed when the $nextTick be triggered if you used the transition feature, so we need use the transition hook to send the $InfiniteLoading:reset event, such as afterLeave hook. The document is here.

Hope can help you @packytagliaferro.

[mutumarieru]

@PeachScript can you show an exemple ? because we don't have access to the component in transition definition

[PeachScript]

Aha...Maybe I thought it too simple? I will try it and add a example into the GitHub Pages.

But I was on vacation, I have to delay to add the example, so sorry.

[mutumarieru]

no problem. Well as there's no access to the component and as i dn't really like to scatter logic in places where it should not, i'd like to see an exemple whenever you have time

2016-09-29 16:55 GMT+02:00 Peach notifications@github.com:

Aha...Maybe I thought it too simple? I will try it and add a example into the GitHub Pages.

But I was on vacation, I have to delay to add the example, so sorry.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/PeachScript/vue-infinite-loading/issues/11#issuecomment-250490772, or mute the thread https://github.com/notifications/unsubscribe-auth/APJ6Xgji6yJpc_Y9l8e21PAd36rRdDAVks5qu9FygaJpZM4KEK95 .

Mutum à vous,

https://www.mutum.fr/

• Ariel Dorol*

Lead développeur Front-end --------------------------------------------- ariel@mutum.fr 06 67 53 91 91 www.mutum.fr -* 54, avenue Lénine, 94250 Gentilly* https://www.facebook.com/mutum.fr https://twitter.com/mutum_fr https://instagram.com/mutum_fr/

http://www.mutum.fr/

[manniL]

Any ideas or updates for this issue?

[PeachScript]

@manniL sorry, no progress now...I try the transition hooks to implement it but it is too complex, I did not find an elegant way, so it is temporarily shelved

[manniL]

@PeachScript Alright, thanks for the update though! ☺️

[glowens]

Any update on getting this feature or has any found a workaround?

[ven0ms99]

I just came across the bug too. Would appreciate help a lot. Workaround in the meantime: Set a single transition per element, on which you do: v-if="created" and set created to true in created() hook.

[nathanzhang1992]

I just use transition hooks to solve the problem.

    <transition-group  v-on:after-leave="afterLeave">
    </transition-group>

     afterLeave () {
        this.$nextTick(() => {
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset')
        })
      }

[PeachScript]

@nathanzhang1992 good idea! I've tried to handle hooks through this component, but it is difficult, deal with outside maybe the real right way.