Compare commits

..

No commits in common. "fab73f00ab70c1963fabeef3f57e4b5d852f2a7d" and "edb26b3d8b54670e430b1583a41aa6f031072389" have entirely different histories.

3 changed files with 3 additions and 62 deletions

View File

@ -1,4 +1,3 @@
@import "../../app.scss";
view.mask { view.mask {
position: fixed; position: fixed;
@ -7,39 +6,3 @@ view.mask {
background-color: rgba($color: #000000, $alpha: .2); background-color: rgba($color: #000000, $alpha: .2);
z-index: 1; z-index: 1;
} }
view.mask.block {
display: block;
}
view.mask.none {
display: none;
}
view.mask.show {
animation: show .1s cubic-bezier(0, 0, 1, 1) both;
opacity: 1;
}
view.mask.hide {
animation: hide .1s cubic-bezier(0, 0, 1, 1) both;
opacity: 0;
}
@keyframes show{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes hide{
from {
opacity: 1;
}
to {
opacity: 0;
}
}

View File

@ -2,11 +2,6 @@ import { Modular, Manager } from "../../core/Module";
class Mask<M extends Manager> extends Modular<M> { class Mask<M extends Manager> extends Modular<M> {
/**
*
*/
public static readonly animateTime: number = 100;
public data? = { public data? = {
/** /**
@ -14,11 +9,6 @@ class Mask<M extends Manager> extends Modular<M> {
*/ */
zIndex: 1, zIndex: 1,
/**
*
*/
isDisplay: false,
/** /**
* *
*/ */
@ -31,25 +21,14 @@ class Mask<M extends Manager> extends Modular<M> {
* *
*/ */
public showMask() { public showMask() {
this.setData({ this.setData({ isShow: true });
isShow: true,
isDisplay: true
});
} }
/** /**
* *
*/ */
public hideMask() { public hideMask() {
this.setData({ this.setData({ isShow: false });
isShow: false
});
this.disappearTimer = setTimeout(() => {
this.setData({
isDisplay: false
});
}, Mask.animateTime);
} }
public override onLoad() { public override onLoad() {

View File

@ -1,6 +1,5 @@
<!-- 蒙版 --> <!-- 蒙版 -->
<view class="mask {{ mask$isShow ? 'show' : 'hide' }} {{ mask$isDisplay ? 'block' : 'none' }}" <view class="mask" bindtap="mask$handleClickMask" style="display:{{mask$isShow ? 'block' : 'none'}}"></view>
bindtap="mask$handleClickMask"></view>
<!-- 顶部的阴影 --> <!-- 顶部的阴影 -->
<view class="top-shadow"></view> <view class="top-shadow"></view>