diff --git a/src/index.ts b/src/index.ts index 14db78f..c2965c5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -141,6 +141,7 @@ type DragAxis = 'x' | 'y' | 'both' export type Config = { animation: AnimationType + animationDuration: number | undefined enabled: boolean swapMode: 'hover' | 'drop' dragOnHold: boolean @@ -151,6 +152,7 @@ export type Config = { const DEFAULT_CONFIG: Config = { animation: 'dynamic', + animationDuration: undefined, enabled: true, swapMode: 'hover', dragOnHold: false, @@ -159,14 +161,17 @@ const DEFAULT_CONFIG: Config = { manualSwap: false } -function getAnimateConfig(animationType: AnimationType): AnimateConfig { +function getAnimateConfig( + animationType: AnimationType, + animationDuration: number | undefined +): AnimateConfig { switch (animationType) { case 'dynamic': - return { easing: easeOutCubic, duration: 300 } + return { easing: easeOutCubic, duration: animationDuration ?? 300 } case 'spring': - return { easing: easeOutBack, duration: 350 } + return { easing: easeOutBack, duration: animationDuration ?? 350 } case 'none': - return { easing: (t: number) => t, duration: 1 } + return { easing: (t: number) => t, duration: animationDuration ?? 1 } } } @@ -868,7 +873,10 @@ function createItem(itemEl: HTMLElement, store: Store): Item { continuousDrag = true } }, - getAnimateConfig(store.config().animation) + getAnimateConfig( + store.config().animation, + store.config().animationDuration + ) ) } }) @@ -1018,7 +1026,10 @@ function createSyncUpdate() { function animateFlippedItem(item: Item, flip: Flip) { item.cancelAnimation().moveToSlot?.() item.cancelAnimation().drop?.() - const animateConfig = getAnimateConfig(item.store().config().animation) + const animateConfig = getAnimateConfig( + item.store().config().animation, + item.store().config().animationDuration + ) const transitionValues = flip.transitionValues()