Dokumentation/API

Animationen

Die Optionen und Hooks der Animationen – Sortieren, der Drop und Änderungen, die kein Drag ausgelöst hat.

Diese Seite wurde von KI übersetzt und kann Ungenauigkeiten enthalten. Englisches Original lesen

Die Optionen animation (Layout-Bewegungen beim Sortieren), dropAnimation (die Landung des Overlays) und animateChanges (Datenänderungen, die kein Drag ausgelöst hat) des Providers nehmen false, Optionen oder deine eigene Funktion entgegen – für GSAP oder motion. Listen und Bäume können animation und animateChanges überschreiben; ziehbare Elemente, sortierbare Elemente und Listen können ihre eigene dropAnimation mitbringen, Drop-Ziele eine overDropAnimation. Siehe Animationen.

<DnDProvider :animation="{ duration: 180, easing: 'ease-out' }" :drop-animation="false" />

Jede Bahn unten ist ein eigener Provider, der animation, dropAnimation und animateChanges dieselbe Art von Wert gibt (animateChanges bekommt in move eine Funktion).

Live Mische, oder ziehe in jeder Bahn eine Zeile

Demo wird geladen…

<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider, type AutoAnimation, type DropAnimation, type LayoutAnimation } from '@vue-dnd-kit/core';
import AnimLane from './AnimLane.vue';
import { tiltDrop, tiltMove } from './tilt';

const SLOW = { duration: 700, easing: 'ease-in-out' };

// One shape per lane, for all three options: sorting, the drop, and changes no drag made.
const lanes: { label: string; animation: LayoutAnimation; dropAnimation: DropAnimation; animateChanges: AutoAnimation }[] = [
  { label: 'true', animation: true, dropAnimation: true, animateChanges: true },
  { label: 'false', animation: false, dropAnimation: false, animateChanges: false },
  { label: '{ duration: 700 }', animation: SLOW, dropAnimation: SLOW, animateChanges: SLOW },
  // `animateChanges` takes no function itself: its parts (`move`, `enter`, `leave`) do.
  { label: 'ƒ tilt', animation: tiltMove, dropAnimation: tiltDrop, animateChanges: { move: tiltMove } },
];

const letters = ['A', 'B', 'C', 'D'];
const rows = ref(lanes.map(() => letters.map((id, i) => ({ id, hue: 150 + i * 40 }))));

/** The same new order in every lane (Fisher–Yates: every order as likely): `animateChanges` plays it four ways. */
const shuffle = () => {
  const order = [...letters];
  for (let i = order.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [order[i], order[j]] = [order[j]!, order[i]!];
  }
  rows.value = rows.value.map((lane) => order.map((id) => lane.find((row) => row.id === id)!));
};
</script>

<template>
  <div class="demo">
    <code>&lt;DnDProvider :animation="shape" :drop-animation="shape" :animate-changes="shape"&gt;</code>
    <div class="lanes">
      <!-- A provider per lane: each one has its own animations. -->
      <DnDProvider
        v-for="(lane, index) in lanes"
        :key="lane.label"
        :animation="lane.animation"
        :drop-animation="lane.dropAnimation"
        :animate-changes="lane.animateChanges"
      >
        <AnimLane v-model="rows[index]!" :label="lane.label" />
      </DnDProvider>
    </div>
    <button type="button" @click="shuffle">Shuffle all</button>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

code {
  max-width: 100%;
  font: 11px/1.4 ui-monospace, Menlo, Consolas, monospace;
  text-align: center;
  opacity: 0.7;
}

button {
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: #42b883;
  color: #fff;
  font: 600 12px/1 system-ui, sans-serif;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.lanes {
  display: grid;
  grid-template-columns: repeat(4, 128px);
  gap: 8px;
}

@media (max-width: 560px) {
  .lanes {
    grid-template-columns: repeat(2, 128px);
  }
}
</style>

Optionen

Das Timing einer Animation. Was weggelassen wird, behält den Standardwert dieser Animation.

duration?

number

In ms. Standard 200 für Layout-Bewegungen, 250 für den Drop; 0 schaltet die Animation aus.

easing?

string

Ein CSS-Easing ('ease-out', cubic-bezier(…)).

Sortieren

Wie Elemente an ihre neuen Plätze gelangen: true (Standard-Timing), Optionen, false (sie springen) oder eine Funktion, die ein Element von from nach to animiert und seine Animation zurückgibt, ein Promise, das abgeschlossen ist, wenn sie endet, oder nichts.

type LayoutAnimation = | boolean | AnimationOptions | ((context: LayoutAnimationContext) => Animation | Promise<unknown> | void)

Was eine Layout-Animationsfunktion erhält, für ein Element, das an seinen neuen Platz zieht.

key

Key

Schlüssel des Elements.

element

HTMLElement

Das DOM-Element des Elements, bereits an seinem neuen Platz.

from

Rect

Sichtbares Rechteck vor der Änderung (wo eine laufende Animation das Element gezeigt hat).

Rect

Layout-Rechteck nach der Änderung.

options

Required<AnimationOptions>

Das Timing aus den Optionen, mit eingesetzten Standardwerten.

reason

'drag' | 'change'

Was das Element bewegt hat: ein Drag ('drag': Sortieren, der Drop, ein Abbruch) oder eine Änderung deiner Daten, die kein Drag ausgelöst hat ('change', bei eingeschaltetem animateChanges der Liste).

signal

AbortSignal

Wird abgebrochen, wenn die Bibliothek die Animation unterbricht: Das Element bewegt sich erneut, bevor sie endet (die nächste Animation beginnt dort, wo es gezeigt wird), oder Animationen werden ausgeschaltet. Eine zurückgegebene Animation wird für dich abgebrochen. Stoppe hier alles andere und mache die Styles, die es gesetzt hat, sofort rückgängig: Das Layout wird direkt danach gemessen.

reducedMotion

boolean

prefers-reduced-motion: reduce ist gesetzt. Die eigenen Animationen der Bibliothek laufen dann nicht; deine Funktionen laufen immer und entscheiden anhand dieses Werts (überspringen oder eine Überblendung beibehalten).

Der Drop

Wie das Overlay bei einem Drop landet und bei einem Abbruch zurückfliegt: true (Standard-Timing), Optionen, false (kein Flug: Es endet dort, wo es losgelassen wurde) oder eine Funktion, die overlay von from nach to animiert und seine Animation zurückgibt, ein Promise, das abgeschlossen ist, wenn sie endet, oder nichts.

type DropAnimation = | boolean | AnimationOptions | ((context: DropAnimationContext) => Animation | Promise<unknown> | void)

Was eine Drop-Animationsfunktion erhält: das Overlay, wo es ist und wo es landet.

overlay

HTMLElement

Die Box des Overlays; sie landet im Slot des aktiven Elements. Bei einem Multi-Drag landen die Klone der anderen Elemente, die darin mitfahren (die des Standard-Overlays, die DragPreviews eines eigenen), von selbst in ihren eigenen Slots (mit dem Standard-Timing, wenn dies eine eigene Funktion ist).

from

Rect

Wo das Overlay ist, wenn der Drag endet.

Rect | null

Endgültiges Rechteck des abgelegten Elements; null, wenn es nicht gerendert oder nicht sichtbar ist (das Overlay wird ausgeblendet).

into

Rect | null

Das Element ist nach einem Drop auf eine Drop-Zone (keine sortierbare Liste) nicht zu sehen, z. B. wurde es in ein anderes Element (einen Ordner) oder eine Papierkorb-Zone abgelegt: das sichtbare Rechteck der Zone. Die Standardanimation lässt das Overlay beim Ausblenden in dieses Rechteck schrumpfen, statt es an Ort und Stelle auszublenden.

reason

'drop' | 'cancel'

'drop': Das Overlay landet dort, wo der Drop das Element abgelegt hat. 'cancel': Es fliegt dorthin zurück, wo das Element war.

active

Active

Der beendete Drag.

over

Over | null

Das Ziel, auf dem der Drop landet (eine Liste, eine Zone); null beim Abbrechen.

options

Required<AnimationOptions>

Das Timing aus den Optionen, mit eingesetzten Standardwerten.

reducedMotion

boolean

Datenänderungen

Animiert Änderungen an den Elementen einer Liste (oder eines Baums), die kein Drag ausgelöst hat: hinzugefügte, entfernte, verschobene (eine Sortierung, ein Mischen, ein Verschieben zwischen Listen einer Gruppe) oder gefilterte Elemente. Standardmäßig aus (false); true animiert Verschiebungen sowie erscheinende und verschwindende Elemente mit dem Standard-Timing. Drags behalten ihre eigenen Animationen (animation, dropAnimation). Mit prefers-reduced-motion: reduce laufen die Standardanimationen nicht; deine Funktionen laufen trotzdem (mit reducedMotion: true). Nur Elemente in der Nähe des sichtbaren Bereichs werden animiert (nicht gemountete Zeilen einer virtuellen Liste werden übersprungen).

type AutoAnimation = boolean | AutoAnimationOptions

animateChanges mit seinen Teilen: duration und easing für alle, und pro Art von Änderung true, Optionen (über den gemeinsamen), false oder eine eigene Funktion.

move?

LayoutAnimation

Elemente, die ihren Platz gewechselt haben (das Standard-FLIP, wie bei animation; eine Funktion ersetzt es).

enter?

EnterAnimation

Erschienene Elemente. Standard: Sie werden an ihrem Platz eingeblendet.

leave?

LeaveAnimation

Verschwundene Elemente. Standard: Eine Kopie des Elements wird dort ausgeblendet, wo es war, und schrumpft dabei ein wenig.

true, Optionen, false (das Element erscheint einfach) oder eine Funktion, die sein Erscheinen animiert.

type EnterAnimation = | boolean | AnimationOptions | ((context: EnterAnimationContext) => Animation | Promise<unknown> | void)

Ein Element, das in einer Liste mit eingeschaltetem animateChanges erschienen ist: hinzugefügt oder wieder eingeblendet (ein Filter, ein aufgeklappter Baumknoten).

key

Key

Schlüssel des Elements.

element

HTMLElement

Das DOM-Element des Elements, bereits an seinem Platz.

Rect

Wo es erschienen ist (Layout-Rechteck).

options

Required<AnimationOptions>

Das Timing aus den Optionen, mit eingesetzten Standardwerten.

reducedMotion

boolean

true, Optionen, false (das Element verschwindet einfach) oder eine Funktion, die das Verschwinden der an seinem Platz zurückgelassenen Kopie animiert: Gib ihre Animation oder ein Promise zurück, und die Kopie wird entfernt, wenn sie endet (sofort, wenn die Funktion nichts zurückgibt).

type LeaveAnimation = | boolean | AnimationOptions | ((context: LeaveAnimationContext) => Animation | Promise<unknown> | void)

Ein Element, das eine Liste mit eingeschaltetem animateChanges verlassen hat: entfernt oder ausgeblendet (ein Filter, ein zugeklappter Baumknoten).

key

Key

Schlüssel des Elements.

element

HTMLElement

Eine Kopie des DOM-Elements, gezeigt dort, wo das Element war (das Element selbst ist weg): absolut positioniert in seinem alten Elternelement, für den Zeiger nicht erreichbar, markiert mit data-dnd-leaving. Die Bibliothek entfernt sie, wenn deine Animation endet.

from

Rect

Wo das Element war.

options

Required<AnimationOptions>

Das Timing aus den Optionen, mit eingesetzten Standardwerten.

reducedMotion

boolean