小程序 css3动画弹层

在开发者工具中预览效果
因为小程序没有弹层组件（除了showToase ,showModal外），很多时候我们是要在弹出上放图片，设置文字样式等等。这里总结了如何简洁方便的写一个弹层。

场景：
触发某事件后 "弹出" 一个窗口

0e86o-nfww2.gif

思路：

1. 用一个变量控制 遮罩层的显示隐藏控制；
2. 用同一个变量控制 内容层的显示隐藏控制；
3. 如何做到给用户一种“跳出”的感觉，因为内容层是有东西的，我们可以给内容层从无到有一个过度的效果，过度效果可以用css3 的 transition属性，那么从无到有呢？既然说到css3自然就想到scale啦，从scale(0) 到 scale(1)，期间加一个过度属性就ok啦。
   4.同理，如果做一个从上向下滑的弹窗，也是一样从无到有的过程，而从上向下滑出用的是transform，无的时候位移为transform(-1334rpx)，这样的话就隐藏在屏幕头部啦，当控制变量为true时，transform(0rpx)此时无位移，元素自然就出现啦，期间加个过度属性就可以啦。

具体实现：
.wxss文件

.g_transition3s {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.g_scale0 {
  -webkit-transform: scale(0);
  transform: scale(0);
}

.g_scale1 {
  -webkit-transform: scale(1);
  transform: scale(1);
}

.modal_mask {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modal_scale {
  position: fixed;
  z-index: 1001;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 618rpx;
  height: 660rpx;
  margin: auto;
  overflow: hidden;
  background: #fff;
}

.js文件

toggle() {
    this.setData({
      isShow: !this.data.isShow
    })
  },

.wxml文件

<view class='modal_mask' wx:if="{{isScaleModal}}" bindtap='toggle'></view>
<view class='modal_scale g_transition3s {{isShow? "g_scale1" : "g_scale0"}}' style='border-radius: 20rpx;'>
    这里面是内容
  </view>

用isShow一个布尔值来控制用g_scale1还是g_scale0样式。为false时用scale(0)元素隐藏，true时用scale(1)元素显示。