feat(useTransition): support for reactive durations (vueuse#264)

* support reactive transition duration

* improve test readability

* demo variable transition duration

* fix typo

Author: scottbedard

.storybook/style.css

@@ -38,7 +38,7 @@
   @apply bg-gray-400 border-gray-600 text-gray-600 opacity-50 pointer-events-none;
 }
 
-#demo input {
+#demo input:not([type=radio]) {
   @apply bg-transparent appearance-none border border-gray-600 rounded w-full py-2 px-4 my-2 mx-1 text-white leading-tight block;
 }
 

packages/core/useTransition/index.md

@@ -61,6 +61,6 @@ const easeOutElastic = (n) => {
 
 useTransition(baseNumber, {
   duration: 1000,
-  transition: easeInOutElastic,
+  transition: easeOutElastic,
 })
 ```

packages/core/useTransition/index.stories.tsx

@@ -31,6 +31,7 @@ defineDemo(
   defineComponent({
     setup() {
       const baseNumber = ref(0)
+      const duration = ref(1000)
 
       const easeOutElastic = (n: number) => {
         return n === 0
@@ -41,12 +42,12 @@ defineDemo(
       }
 
       const cubicBezierNumber = useTransition(baseNumber, {
-        duration: 1500,
+        duration,
         transition: [0.75, 0, 0.25, 1],
       })
 
       const customFnNumber = useTransition(baseNumber, {
-        duration: 1500,
+        duration,
         transition: easeOutElastic,
       })
 
@@ -57,6 +58,7 @@ defineDemo(
         baseNumber,
         cubicBezierNumber,
         customFnNumber,
+        duration,
         track,
         sled,
       }
@@ -66,6 +68,19 @@ defineDemo(
       <div>
         <button @click="toggle">Transition</button>
 
+        <p class="mt-2">
+          Duration:
+          <label class="ml-2">
+            <input v-model="duration" type="radio" :value="1000" /> 1000ms
+          </label>
+          <label class="ml-2">
+            <input v-model="duration" type="radio" :value="5000" /> 5000ms
+          </label>
+          <label class="ml-2">
+            <input v-model="duration" type="radio" :value="10000" /> 10000ms
+          </label>
+        </p>
+
         <p class="mt-2">
           Base number: <b>{{ baseNumber }}</b>
         </p>

packages/core/useTransition/index.test.ts

@@ -1,9 +1,10 @@
 import { ref } from 'vue-demi'
 import { useSetup } from '../../_tests'
 import { useTransition, TransitionPresets } from '.'
+import { promiseTimeout } from '../../shared/utils'
 
 describe('useTransition', () => {
-  it('transitions between values', (done) => {
+  it('transitions between values', async() => {
     const vm = useSetup(() => {
       const baseValue = ref(0)
 
@@ -25,22 +26,19 @@ describe('useTransition', () => {
     // changing the base value should start the transition
     vm.baseValue = 1
 
-    setTimeout(() => {
-      // half way through the transition the base value should be 1,
-      // and the transitioned value should be approximately 0.5
-      expect(vm.baseValue).toBe(1)
-      expect(vm.transitionedValue > 0 && vm.transitionedValue < 1).toBe(true)
-
-      setTimeout(() => {
-        // once the transition is complete, both values should be 1
-        expect(vm.baseValue).toBe(1)
-        expect(vm.transitionedValue).toBe(1)
-        done()
-      }, 100)
-    }, 50)
+    // half way through the transition the base value should be 1,
+    // and the transitioned value should be approximately 0.5
+    await promiseTimeout(50)
+    expect(vm.baseValue).toBe(1)
+    expect(vm.transitionedValue > 0 && vm.transitionedValue < 1).toBe(true)
+
+    // once the transition is complete, both values should be 1
+    await promiseTimeout(100)
+    expect(vm.baseValue).toBe(1)
+    expect(vm.transitionedValue).toBe(1)
   })
 
-  it('exposes named presets', (done) => {
+  it('exposes named presets', async() => {
     const vm = useSetup(() => {
       const baseValue = ref(0)
 
@@ -57,17 +55,14 @@ describe('useTransition', () => {
 
     vm.baseValue = 1
 
-    setTimeout(() => {
-      expect(vm.transitionedValue > 0 && vm.transitionedValue < 1).toBe(true)
+    await promiseTimeout(50)
+    expect(vm.transitionedValue > 0 && vm.transitionedValue < 1).toBe(true)
 
-      setTimeout(() => {
-        expect(vm.transitionedValue).toBe(1)
-        done()
-      }, 100)
-    }, 50)
+    await promiseTimeout(100)
+    expect(vm.transitionedValue).toBe(1)
   })
 
-  it('supports custom function transitions', (done) => {
+  it('supports custom function transitions', async() => {
     const vm = useSetup(() => {
       const baseValue = ref(0)
 
@@ -84,13 +79,44 @@ describe('useTransition', () => {
 
     vm.baseValue = 1
 
-    setTimeout(() => {
-      expect(vm.transitionedValue > 0 && vm.transitionedValue < 1).toBe(true)
+    await promiseTimeout(50)
+    expect(vm.transitionedValue > 0 && vm.transitionedValue < 1).toBe(true)
+
+    await promiseTimeout(100)
+    expect(vm.transitionedValue).toBe(1)
+  })
+
+  it('support dynamic transition durations', async() => {
+    const vm = useSetup(() => {
+      const baseValue = ref(0)
+      const duration = ref(100)
+
+      const transitionedValue = useTransition(baseValue, {
+        duration,
+        transition: n => n,
+      })
+
+      return {
+        baseValue,
+        duration,
+        transitionedValue,
+      }
+    })
+
+    // first transition should take 100ms
+    vm.baseValue = 1
+
+    await promiseTimeout(150)
+    expect(vm.transitionedValue).toBe(1)
+
+    // second transition should take 200ms
+    vm.duration = 200
+    vm.baseValue = 2
+
+    await promiseTimeout(150)
+    expect(vm.transitionedValue < 2).toBe(true)
 
-      setTimeout(() => {
-        expect(vm.transitionedValue).toBe(1)
-        done()
-      }, 100)
-    }, 50)
+    await promiseTimeout(100)
+    expect(vm.transitionedValue).toBe(2)
   })
 })

packages/core/useTransition/index.ts

@@ -1,13 +1,13 @@
 import { useRafFn } from '../useRafFn'
-import { Ref, ref, watch } from 'vue-demi'
-import { clamp, isFunction } from '@vueuse/shared'
+import { Ref, ref, unref, watch } from 'vue-demi'
+import { clamp, isFunction, MaybeRef } from '@vueuse/shared'
 
 type CubicBezierPoints = [number, number, number, number]
 
 type EasingFunction = (x: number) => number
 
 interface TransitionOptions {
-  duration?: number
+  duration?: MaybeRef<number>
   transition?: EasingFunction | CubicBezierPoints
 }
 
@@ -90,14 +90,15 @@ export function useTransition(source: Ref<number>, options: TransitionOptions =
     ? transition
     : createEasingFunction(transition)
 
+  let currentDuration = 0
   let diff = 0
   let endAt = 0
   let startAt = 0
   let startValue = 0
 
   const { resume, pause } = useRafFn(() => {
     const now = Date.now()
-    const progress = clamp(1 - ((endAt - now) / duration), 0, 1)
+    const progress = clamp(1 - ((endAt - now) / currentDuration), 0, 1)
 
     output.value = startValue + (diff * getValue(progress))
 
@@ -108,10 +109,11 @@ export function useTransition(source: Ref<number>, options: TransitionOptions =
   watch(source, () => {
     pause()
 
+    currentDuration = unref(duration)
     diff = source.value - output.value
     startValue = output.value
     startAt = Date.now()
-    endAt = startAt + duration
+    endAt = startAt + currentDuration
 
     resume()
   })