动画 自制弹框上滑+渐显效果
生活随笔
收集整理的這篇文章主要介紹了
动画 自制弹框上滑+渐显效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<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%);}
}
總結
以上是生活随笔為你收集整理的动画 自制弹框上滑+渐显效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 串口通信(232,485,422)以及常
- 下一篇： 斐讯k1路由器刷Breed BootLo