混合动画

vue-draggable-plus指南-教程

混合动画

在拖拽排序时，可以通过 animation 属性实现拖拽过程中的过渡动画；在拖拽结束并还原时，可以通过 transition 属性实现还原动画。两者可以组合使用，带来更流畅的交互体验。

组件使用

vue 复制代码

<template>
  <button @click="sort">还原</button>
  <div class="flex justify-between">
    <VueDraggable
      v-model="list"
      :animation="150"
      target=".sort-target"
      class="flex flex-col gap-2 pr-4 w-300px bg-gray-500/5 rounded"
      @start="onStart"
      @end="onEnd"
    >
      <TransitionGroup
        type="transition"
        tag="ul"
        :name="!drag ? 'fade' : undefined"
        class="sort-target"
      >
        <li
          v-for="item in list"
          :key="item.id"
          class="cursor-move h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
        >
          {{ item.name }}
        </li>
      </TransitionGroup>
    </VueDraggable>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const drag = ref(false)

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  drag.value = true
}
function onEnd() {
  console.log('onEnd')
  nextTick(() => {
    drag.value = false
  })
}
function sort() {
  list.value.sort((a, b) => a.id - b.id)
}
</script>

<style>
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.fade-leave-active {
  position: absolute;
}
</style>

函数使用

vue 复制代码

<template>
  <button @click="sort">还原</button>
  <div class="flex justify-between">
    <TransitionGroup
      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
      ref="el"
      type="transition"
      tag="ul"
      :name="!drag ? 'fade' : undefined"
    >
      <li
        v-for="item in list"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
      >
        {{ item.name }}
      </li>
    </TransitionGroup>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { useDraggable } from 'vue-draggable-plus'
const drag = ref(false)

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
const el = ref()

useDraggable(el, list, {
  animation: 150,
  onStart() {
    drag.value = true
  },
  onEnd() {
    console.log('onEnd')
    nextTick(() => {
      drag.value = false
    })
  }
})

const sort = () => {
  list.value.sort((a, b) => a.id - b.id)
}
</script>

<style>
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.fade-leave-active {
  position: absolute;
}
</style>

指令使用

vue 复制代码

<template>
  <button @click="sort">还原</button>
  <div class="flex justify-between">
    <TransitionGroup
      v-draggable="[list, { animation: 150, onStart, onEnd }]"
      class="flex flex-col p-4 w-300px bg-gray-500/5 rounded"
      type="transition"
      tag="ul"
      :name="!drag ? 'fade' : undefined"
    >
      <li
        v-for="item in list"
        :key="item.id"
        class="cursor-move h-50px bg-gray-500/5 rounded flex items-center justify-between px-2"
      >
        {{ item.name }}
      </li>
    </TransitionGroup>
    <preview-list :list="list" />
  </div>
</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { vDraggable } from 'vue-draggable-plus'
const drag = ref(false)

const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])

function onStart() {
  drag.value = true
}
function onEnd() {
  console.log('onEnd')
  nextTick(() => {
    drag.value = false
  })
}

function sort() {
  list.value.sort((a, b) => a.id - b.id)
}
</script>

<style>
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

.fade-leave-active {
  position: absolute;
}
</style>

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。