<view class="mask {{showShare ? 'slidefadeUp' : 'slidefadeDown'}}" wx:if="{{showShare}}" catchtouchmove="false">
</view>
/* 上滑+渐显效果 */
.slidefadeUp {
animation: slidefadeUp 0.5s 1 ease forwards;
-webkit-animation: slidefadeUp 0.5s 1 ease forwards;
}
@keyframes slidefadeUp {
from {
opacity: 0;
transform: translate(0, 100%);
}
to {
opacity: 1;
transform: translate(0, 0)
}
}
/* 下滑+渐隐效果 */
.slidefadeDown {
animation: slidefadeDown 0.5s 1 ease forwards;
-webkit-animation: slidefadeDown 0.5s 1 ease forwards;
}
@keyframes slidefadeDown {
from {
opacity: 1;
transform: translate(0, 0)
}
to {
opacity: 0;
transform: translate(0, 100%);
}
}
动画 自制弹框上滑+渐显效果
最新推荐文章于 2022-08-22 17:48:47 发布