blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-06 03:58:05 +08:00
Code Issues Projects Releases Wiki Activity

fix(Collapse): animate invalid on multi clicks (#4567)

Browse Source
This commit is contained in:
nemo-shen 2021-10-18 14:12:14 +08:00 committed by GitHub
parent 7f3614997e
commit 1860ddfcb1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/collapse-item/animate.ts
View File

@ -1,43 +1,5 @@
import { canIUseAnimate } from '../common/version';
import { getRect } from '../common/utils'; import { getRect } from '../common/utils';
function useAnimate(
context: WechatMiniprogram.Component.TrivialInstance,
expanded: boolean,
mounted: boolean,
height: number
) {
const selector = '.van-collapse-item__wrapper';
if (expanded) {
context.animate(
selector,
[
{ height: 0, ease: 'ease-in-out', offset: 0 },
{ height: `${height}px`, ease: 'ease-in-out', offset: 1 },
{ height: `auto`, ease: 'ease-in-out', offset: 1 },
],
mounted ? 300 : 0,
() => {
context.clearAnimation(selector);
}
);
return;
}
context.animate(
selector,
[
{ height: `${height}px`, ease: 'ease-in-out', offset: 0 },
{ height: 0, ease: 'ease-in-out', offset: 1 },
],
300,
() => {
context.clearAnimation(selector);
}
);
}
function useAnimation( function useAnimation(
context: WechatMiniprogram.Component.TrivialInstance, context: WechatMiniprogram.Component.TrivialInstance,
expanded: boolean, expanded: boolean,
@ -86,8 +48,6 @@ export function setContentAnimate(
getRect(context, '.van-collapse-item__content') getRect(context, '.van-collapse-item__content')
.then((rect) => rect.height) .then((rect) => rect.height)
.then((height: number) => { .then((height: number) => {
canIUseAnimate() useAnimation(context, expanded, mounted, height);
? useAnimate(context, expanded, mounted, height)
: useAnimation(context, expanded, mounted, height);
}); });
} }