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>
</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 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>
</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 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>
</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 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>
</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>
`;
@ -182,7 +182,7 @@ exports[`show dropdown item 3`] = `
<div class="van-cell__title"><span>B</span></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>
`;

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

@ -73,8 +73,8 @@ export const PopupMixin = {
}
},
/* istanbul ignore next */
activated() {
/* istanbul ignore next */
if (this.value) {
this.open();
}
@ -88,8 +88,8 @@ export const PopupMixin = {
}
},
/* istanbul ignore next */
deactivated() {
/* istanbul ignore next */
this.close();
},
@ -171,6 +171,7 @@ export const PopupMixin = {
if (this.overlay) {
openOverlay(this, {
zIndex: context.zIndex++,
duration: this.duration,
className: this.overlayClass,
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 { preventDefault } from '../utils/dom/event';
@ -10,6 +10,7 @@ export type OverlayProps = {
zIndex?: number;
className?: any;
visible?: boolean;
duration: number | null;
customStyle?: object;
};
@ -29,11 +30,15 @@ function Overlay(
slots: DefaultSlots,
ctx: RenderContext<OverlayProps>
) {
const style = {
const style: { [key: string]: any } = {
zIndex: props.zIndex,
...props.customStyle
};
if (isDef(props.duration)) {
style.animationDuration = `${props.duration}s`;
}
return (
<transition name="van-fade">
<div
@ -51,7 +56,11 @@ Overlay.props = {
zIndex: Number,
className: null as any,
visible: Boolean,
customStyle: Object
customStyle: Object,
duration: {
type: Number,
default: null
}
};
export default sfc<OverlayProps, OverlayEvents>(Overlay);