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

feat(FloatingPanel): optimize bounce animate (#12317)

Browse Source 
* feat(VantUse): add useSpring composables

* feat(VantUse): add useSpring composables

* feat(FloatingPanel): optimize bounce animate
This commit is contained in:
ShuGang Zhou 2023-09-29 20:40:38 +08:00 committed by GitHub
parent 12b2fef7bd
commit c24b7f7d80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/vant/src/floating-panel/FloatingPanel.tsx
View File

@ -27,7 +27,7 @@ import { useSyncPropRef } from '../composables/use-sync-prop-ref';
export const floatingPanelProps = { export const floatingPanelProps = {
height: makeNumericProp(0), height: makeNumericProp(0),
anchors: makeArrayProp<number>(), anchors: makeArrayProp<number>(),
duration: makeNumericProp(0.2), duration: makeNumericProp(0.3),
contentDraggable: truthProp, contentDraggable: truthProp,
lockScroll: Boolean, lockScroll: Boolean,
safeAreaInsetBottom: truthProp, safeAreaInsetBottom: truthProp,
@ -71,7 +71,9 @@ export default defineComponent({
const rootStyle = computed(() => ({ const rootStyle = computed(() => ({
height: addUnit(boundary.value.max), height: addUnit(boundary.value.max),
transform: `translateY(calc(100% + ${addUnit(-height.value)}))`, transform: `translateY(calc(100% + ${addUnit(-height.value)}))`,
transition: !dragging.value ? `transform ${props.duration}s` : 'none', transition: !dragging.value
? `transform ${props.duration}s cubic-bezier(0.18, 0.89, 0.32, 1.28)`
: 'none',
})); }));
const ease = (moveY: number): number => { const ease = (moveY: number): number => {

1
packages/vant/src/floating-panel/index.less
View File

@ -20,6 +20,7 @@
border-top-left-radius: var(--van-floating-panel-border-radius); border-top-left-radius: var(--van-floating-panel-border-radius);
border-top-right-radius: var(--van-floating-panel-border-radius); border-top-right-radius: var(--van-floating-panel-border-radius);
background: var(--van-floating-panel-background); background: var(--van-floating-panel-background);
will-change: transform;
&::after { &::after {
content: ''; content: '';

2
packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap
View File

@ -62,7 +62,7 @@ exports[`should render demo and match snapshot 1`] = `
> >
<div <div
class="van-floating-panel van-safe-area-bottom" class="van-floating-panel van-safe-area-bottom"
style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;" style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
> >
<div class="van-floating-panel__header"> <div class="van-floating-panel__header">
<div class="van-floating-panel__header-bar"> <div class="van-floating-panel__header-bar">

4
packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap
View File

@ -3,7 +3,7 @@
exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`] = ` exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`] = `
<div <div
class="van-floating-panel van-safe-area-bottom" class="van-floating-panel van-safe-area-bottom"
style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;" style="height: 400px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
> >
<div class="van-floating-panel__header"> <div class="van-floating-panel__header">
<div class="van-floating-panel__header-bar"> <div class="van-floating-panel__header-bar">
@ -18,7 +18,7 @@ exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`]
exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props do not 1`] = ` exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props do not 1`] = `
<div <div
class="van-floating-panel van-safe-area-bottom" class="van-floating-panel van-safe-area-bottom"
style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.2s;" style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
> >
<div class="van-floating-panel__header"> <div class="van-floating-panel__header">
<div class="van-floating-panel__header-bar"> <div class="van-floating-panel__header-bar">