动画 自制弹框上滑+渐显效果

<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%);
    }
}