From 4620b452acda5cbb60dffd3b260d332fcebf84b1 Mon Sep 17 00:00:00 2001 From: 2629878269 <2629878269@qq.com> Date: Tue, 25 Oct 2022 03:24:39 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix(useTransition):=20=E7=A6=81=E7=94=A8?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E8=B0=83=E7=94=A8=20pause()=20=E5=81=9C?= =?UTF-8?q?=E6=AD=A2=20useRafFn?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/useTransition/index.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/core/useTransition/index.ts b/packages/core/useTransition/index.ts index 7c46b5ddbff..ec34a74e622 100644 --- a/packages/core/useTransition/index.ts +++ b/packages/core/useTransition/index.ts @@ -199,15 +199,19 @@ export function useTransition( const timeout = useTimeoutFn(start, delay, { immediate: false }) watch(sourceVector, () => { - if (unref(disabled)) { + if (unref(disabled)) + return + if (unref(delay) <= 0) + start() + else timeout.start() + }, { deep: true }) + + watch(() => unref(disabled), (v) => { + if (v) { outputVector.value = sourceVector.value.slice(0) + pause() } - else { - if (unref(delay) <= 0) - start() - else timeout.start() - } - }, { deep: true }) + }) return computed(() => { const targetVector = unref(disabled) ? sourceVector : outputVector From 7c8cc642a22dea09ef3c8643298b1dc7a7d30c5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E4=BC=97=E8=B1=AA?= Date: Thu, 27 Oct 2022 18:53:02 +0800 Subject: [PATCH 2/3] fix(useTransition): when the duration is 0, 0/0 may occur --- packages/core/useTransition/index.test.ts | 14 +++++++++++++- packages/core/useTransition/index.ts | 4 +++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/core/useTransition/index.test.ts b/packages/core/useTransition/index.test.ts index 389a1e5c980..7ff864e1ed5 100644 --- a/packages/core/useTransition/index.test.ts +++ b/packages/core/useTransition/index.test.ts @@ -1,5 +1,5 @@ import { promiseTimeout } from '@vueuse/shared' -import { ref } from 'vue-demi' +import { nextTick, ref } from 'vue-demi' import { useTransition } from '.' const expectBetween = (val: number, floor: number, ceiling: number) => { @@ -157,6 +157,18 @@ describe('useTransition', () => { expect(transition.value).toBe(2) }) + it('when duration is 0', async () => { + const source = ref(0) + const transition = useTransition(source, { duration: 0 }) + + expect(transition.value).toBe(0) + + source.value = 1 + + await nextTick() + expect(transition.value).toBe(1) + }) + it('fires onStarted and onFinished callbacks', async () => { const source = ref(0) const onStarted = vitest.fn() diff --git a/packages/core/useTransition/index.ts b/packages/core/useTransition/index.ts index ec34a74e622..f7cf23c349d 100644 --- a/packages/core/useTransition/index.ts +++ b/packages/core/useTransition/index.ts @@ -172,7 +172,9 @@ export function useTransition( // transition loop const { resume, pause } = useRafFn(() => { const now = Date.now() - const progress = clamp(1 - ((endAt - now) / currentDuration), 0, 1) + const progress = currentDuration > 0 + ? clamp(1 - ((endAt - now) / currentDuration), 0, 1) + : 1 outputVector.value = startVector.map((val, i) => val + ((diffVector[i] ?? 0) * currentTransition.value(progress))) From b8f1b07e5481d9e8c55a65eda9e4513c5d9ecb30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E4=BC=97=E8=B1=AA?= Date: Thu, 27 Oct 2022 19:06:39 +0800 Subject: [PATCH 3/3] Revert "fix(useTransition): when the duration is 0, 0/0 may occur" This reverts commit 7c8cc642a22dea09ef3c8643298b1dc7a7d30c5e. --- packages/core/useTransition/index.test.ts | 14 +------------- packages/core/useTransition/index.ts | 4 +--- 2 files changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/core/useTransition/index.test.ts b/packages/core/useTransition/index.test.ts index 7ff864e1ed5..389a1e5c980 100644 --- a/packages/core/useTransition/index.test.ts +++ b/packages/core/useTransition/index.test.ts @@ -1,5 +1,5 @@ import { promiseTimeout } from '@vueuse/shared' -import { nextTick, ref } from 'vue-demi' +import { ref } from 'vue-demi' import { useTransition } from '.' const expectBetween = (val: number, floor: number, ceiling: number) => { @@ -157,18 +157,6 @@ describe('useTransition', () => { expect(transition.value).toBe(2) }) - it('when duration is 0', async () => { - const source = ref(0) - const transition = useTransition(source, { duration: 0 }) - - expect(transition.value).toBe(0) - - source.value = 1 - - await nextTick() - expect(transition.value).toBe(1) - }) - it('fires onStarted and onFinished callbacks', async () => { const source = ref(0) const onStarted = vitest.fn() diff --git a/packages/core/useTransition/index.ts b/packages/core/useTransition/index.ts index f7cf23c349d..ec34a74e622 100644 --- a/packages/core/useTransition/index.ts +++ b/packages/core/useTransition/index.ts @@ -172,9 +172,7 @@ export function useTransition( // transition loop const { resume, pause } = useRafFn(() => { const now = Date.now() - const progress = currentDuration > 0 - ? clamp(1 - ((endAt - now) / currentDuration), 0, 1) - : 1 + const progress = clamp(1 - ((endAt - now) / currentDuration), 0, 1) outputVector.value = startVector.map((val, i) => val + ((diffVector[i] ?? 0) * currentTransition.value(progress)))