小程序自定义弹窗（有显示动画的）

小程序类似与Vue.js，Angular.js这样的模板引擎，这类MVVM的数据驱动框架能快速的开发项目，但是在做小程序时必会遇到的一个问题就是弹窗非常生硬，没有过渡动画。下面的源码未例一个有动画的小程序弹窗

代码片段链接：wechatide://minicode/OGY2jlmH7f3z

页面结构：index.wxml

<view class='shade' hidden='{{popup}}' bindtap='hidePopup'></view>
<view class='shade_box popup' hidden='{{popup}}'>
	<view class='title'><text>弹窗：</text></view>
	<view class='content'>我是一个有动画的特效的窗口</view>
	<view class='copy'>© 2018 [email protected]</view>
	<view class='msg' bindtap='hidePopup'>点击遮罩层关闭弹窗</view>
</view>

<view  style='margin:20rpx 50rpx;'>
	<button type='primary' bindtap='showPopup'>打开弹窗</button>
</view>

展示样式：index.wxss

/* 遮罩 */
.shade {
  position: fixed;
  top: 0;
	right: 0;
	bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 10;
}
.shade_box {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 11;
  min-width: 200rpx;
  min-height: 200rpx;
	font-size: 28rpx;
  box-sizing: border-box;
  color: #333;
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
  word-wrap: break-word;

	animation-name:popup;
	animation-duration:0.2s;
	animation-timing-function:linear;
	animation-delay:0;
	animation-iteration-count:1;
	animation-direction:normal;
}

@keyframes popup
{
	from{opacity:0;transform:scale(0.3,0.3);}
	to 	{opacity:1;transform:scale(1,1);}
}


/* 当前弹窗样式 */
.popup{
	width: 600rpx;
	height: 600rpx;
	background-color: #ffffff;
}
.popup .title{
	padding: 0 20rpx;
	border-bottom: #e5e5e5 solid 1px;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 32rpx;
	background-color: #f6f6f6;
}
.popup .content{
	margin: 100rpx;
	font-size: 40rpx;
	text-align: center;
	color: #0099ff;
}
.popup .copy{
	color: #999999;
	text-align: center;
}
.popup .msg{
	color: #ff0000;
	text-align: center;
	margin-top: 30rpx;
}

交互逻辑：index.js

Page({
  data: {
    popup: true
  },
  /* 隐藏弹窗 */
  hidePopup(flag = true) {
    this.setData({
      "popup": flag
    });
  },
  /* 显示弹窗 */
  showPopup() {
    this.hidePopup(false);
  }
})

最后礼貌性的给出效果图：

当然啦，本示例只是简单的展示一下有动画弹窗的小程序如何做，更加精美的弹窗效果，只能由你自己去设计啦。

更多精彩文章，敬请持续关注——WEB前端梦之蓝

用微信扫描下方的二维码可直接关注该公众号哦，或者打开微信公众号搜索 “web-7258”，关注后会在第一时间将最新文章推送给您哦！