Vue.draggable: Slot Footer Not Working with Transition Group

[jhull]

Everything works, except when I try to add a non-draggable item with footer within a transition-group like this:

      <draggable v-model="myList" :options="{draggable:'.item'}">
        <transition-group name="animated-list">
          <div v-for="element in myList" :key="element" class="animated-list-item item">
              <book :beat.sync="books[element]"></book>
          </div>
          <button slot="footer" key="button">Add Another Book</button>
        </transition-group>
      </draggable>

If I remove transition-group it works as expected.

[David-Desmaisons]

Use the footer slot decsribed in the readme.

[jhull]

I read the entire Readme and for me, it doesn't work when wrapped in transition-group.

[David-Desmaisons]

It is not supported inside a transition-group.

[maxoux]

Any news about it ? And if not, any idea to get a footer in a draggable list ?
(to smooth animation insertion purposes)

[David-Desmaisons]

You can use the animation option.

[maxoux]

Animation options don't seems to animate list when i add/delete an element, maybe i missed some options ?

[David-Desmaisons]

They work only for drag and drop operation not if you change the list in another way.

[maxoux]

I see... So we can't have a draggable list with a footer button to smoothly add items ?
Thanks for your answers by the way !

[David-Desmaisons]

Why not:

      <draggable v-model="myList" :options="{draggable:'.item'}">
        <transition-group name="animated-list">
          <div v-for="element in myList" :key="element" class="animated-list-item item">
              <book :beat.sync="books[element]"></book>
          </div>    
        </transition-group>
      </draggable>
      <button  key="button">Add Another Book</button>

?

[iota-pi]

@David-Desmaisons Because then the button at the bottom isn't transitioned as it would be as part of the transition group

[David-Desmaisons]

Why if it will stay at the bottom?

[iota-pi]

If you add/remove a list item, it will jump up/down rather than transitioning, since the height of the draggable isn't transitioned

[David-Desmaisons]

Understood.
Unfortunatelly I cannot think of a solution for this one.

[David-Desmaisons]

On second thought, I was abble to make it work, see update footer example:
https://sortablejs.github.io/Vue.Draggable/#/footerslot