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

[improvement] Popup: optimize overlay animation duration (#3610)

Browse Source
This commit is contained in:
neverland 2019-06-24 11:43:34 +08:00 committed by GitHub
parent d6ed8cfe55
commit 7d29ae8a2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dropdown-menu/test/__snapshots__/index.spec.js.snap
View File

@ -37,7 +37,7 @@ exports[`close on click outside 1`] = `
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute;"></div> <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
</div> </div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!----> <!---->
@ -83,7 +83,7 @@ exports[`direction up 1`] = `
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute;"></div> <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
</div> </div>
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;"> <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
<!----> <!---->
@ -115,7 +115,7 @@ exports[`show dropdown item 1`] = `
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute;"></div> <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
</div> </div>
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;"> <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
<!----> <!---->
@ -150,7 +150,7 @@ exports[`show dropdown item 2`] = `
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute;"></div> <div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
</div> </div>
</div> </div>
`; `;
@ -182,7 +182,7 @@ exports[`show dropdown item 3`] = `
<div class="van-cell__title"><span>B</span></div> <div class="van-cell__title"><span>B</span></div>
</div> </div>
</div> </div>
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute;"></div> <div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
</div> </div>
</div> </div>
`; `;

5
packages/mixins/popup/index.js
View File

@ -73,8 +73,8 @@ export const PopupMixin = {
} }
}, },
/* istanbul ignore next */
activated() { activated() {
/* istanbul ignore next */
if (this.value) { if (this.value) {
this.open(); this.open();
} }
@ -88,8 +88,8 @@ export const PopupMixin = {
} }
}, },
/* istanbul ignore next */
deactivated() { deactivated() {
/* istanbul ignore next */
this.close(); this.close();
}, },
@ -171,6 +171,7 @@ export const PopupMixin = {
if (this.overlay) { if (this.overlay) {
openOverlay(this, { openOverlay(this, {
zIndex: context.zIndex++, zIndex: context.zIndex++,
duration: this.duration,
className: this.overlayClass, className: this.overlayClass,
customStyle: this.overlayStyle customStyle: this.overlayStyle
}); });

15
packages/overlay/index.tsx
View File

@ -1,4 +1,4 @@
import { use } from '../utils'; import { use, isDef } from '../utils';
import { inherit } from '../utils/functional'; import { inherit } from '../utils/functional';
import { preventDefault } from '../utils/dom/event'; import { preventDefault } from '../utils/dom/event';
@ -10,6 +10,7 @@ export type OverlayProps = {
zIndex?: number; zIndex?: number;
className?: any; className?: any;
visible?: boolean; visible?: boolean;
duration: number | null;
customStyle?: object; customStyle?: object;
}; };
@ -29,11 +30,15 @@ function Overlay(
slots: DefaultSlots, slots: DefaultSlots,
ctx: RenderContext<OverlayProps> ctx: RenderContext<OverlayProps>
) { ) {
const style = { const style: { [key: string]: any } = {
zIndex: props.zIndex, zIndex: props.zIndex,
...props.customStyle ...props.customStyle
}; };
if (isDef(props.duration)) {
style.animationDuration = `${props.duration}s`;
}
return ( return (
<transition name="van-fade"> <transition name="van-fade">
<div <div
@ -51,7 +56,11 @@ Overlay.props = {
zIndex: Number, zIndex: Number,
className: null as any, className: null as any,
visible: Boolean, visible: Boolean,
customStyle: Object customStyle: Object,
duration: {
type: Number,
default: null
}
}; };
export default sfc<OverlayProps, OverlayEvents>(Overlay); export default sfc<OverlayProps, OverlayEvents>(Overlay);