transition does not work

[murilolivorato]

Hello , I am using vue Draggable with VUE 3 . but transition is not workig .

I did many ways , I did like this -

  <Draggable
                                              v-model="data"
                                              class="space-y-3"
                                              drag-class="drag"
                                              ghost-class="ghost"
                                              group="listproperties"
                                              item-key="index"
                                              tag="ul"
                                              handle=".handle"
                                              @start="drag = true"
                                              @end="drag = false"
                                            >

                                              <template #item="{element}">
                                                <TransitionGroup type="transition" :name="!drag ? 'flip-list' : null" tag="div">
                                                  <my-component
                                                                         :property="element"
                                                                         :index="data.indexOf(element)"
                                                                         :key="data.indexOf(element)" >
                                                </TransitionGroup>
                                              </template>
                                            </Draggable>

CSS -

.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

.list-group {
  min-height: 20px;
}

.list-group-item {
  cursor: move;
}

.list-group-item i {
  cursor: pointer;
}

[WailanTirajoh]

Yap, tried with the example provided, got error on console.

[alecgibson]

We're also getting a console error:

logger.ts:114 TypeError: Cannot set properties of null (setting '__draggable_context')
    at addContext (vuedraggable.umd.js:4478:1)
    at eval (vuedraggable.umd.js:4523:1)
    at Array.forEach (<anonymous>)
    at ComponentStructure.updated (vuedraggable.umd.js:4522:1)
    at Proxy.mounted (vuedraggable.umd.js:4808:1)
    at eval (vue.esm-bundler.js:4690:1)
    at callWithErrorHandling (vue.esm-bundler.js:1640:1)
    at callWithAsyncErrorHandling (vue.esm-bundler.js:1648:1)
    at hook.__weh.hook.__weh (vue.esm-bundler.js:4670:1)
    at flushPostFlushCbs (vue.esm-bundler.js:1807:1)

[thibaultvanc]

same error here on vue3

[MiladRST]

Using transition causes a console error !

[Kamsou]

Hey guys ! is there a fix?

[jTiKey]

The only available transition is

const dragOptions = {
  animation: 200,
}

draggable(v-bind="dragOptions"

[Filip1139]

same problem here

[fuxianwei]

+1

[ronannnn]

+1

[hahatulk]

+1

[john-psina]

+1

[vukadinFE]

• 1

[vukadinFE]

The only available transition is

const dragOptions = {
  animation: 200,
}

draggable(v-bind="dragOptions"

For anyone who is searching for the answer, if you put only :animation="200" or what ever duration you need, without setting the tag to transition-group or adding extra <TransitionGroup> it will just work.