小程序-实现自定义动画弹框/提示框

最新推荐文章于 2024-08-15 23:03:45 发布

itclanCoder

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量1.3k

点赞数

文章标签： animation css sms html 移动开发

本文链接：https://blog.csdn.net/wzc_coder/article/details/109252710

版权

本文介绍了在微信小程序中如何实现自定义动画弹框，包括使用css3的动画和小程序的动画API。通过示例代码展示了两种实现方式，强调了在小程序中使用动画API可以实现更复杂的动画效果，并提供了相关文档链接。

摘要由CSDN通过智能技术生成

前言

在小程序中,用户与界面进行交互时,有一些用户反馈提示,例如:触发某个按钮,从底部弹出框,从顶部弹出等

如今,有一些现成的 UI 库,虽然已经实现了的,但若只是为了实现一个底部弹出框或者自定义提示框,不引用第三方 UI 库

怎么手动原生方式去实现呢,最主要的是怎么去实现动画

css3 实现动画

如下是wxml代码

<view>
  <view class="click-btn" catchtap="onBottomBox">弹出底部弹出框</view>
  <view class="click-btn" bindtap="onTopBox">弹出顶部提示框</view>
  <view wx:if="{
   {isBottom}}" class="bottom-box">
    <div class="mask" bindtap="onHideBox"></div>
    <div class="pop">底部弹出内容</div>
  </view>
  <div wx:if="{
   {isTop}}" class="top-box">通知内容</div>
</view>

如下是wxss代码

/* pages/customalertbox/customalertbox.wxss */
.click-btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.top-box {
  width: 100%;
  height: 30px;
  background: #f56c6c;
  border-radius: 0 0 8px 8px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 28rpx;
  position: absolute;
  top: 0px;
  left: 0;
  animation-duration: 0.5s;
  animation-name: slidetop;
}

.mask {
  width: 100%;
  height: 100%;
  posi