微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）

实现这么一个功能，点击选项进行选择，效果是从底部弹出选项框（带滑出动画），选择了某项或者点击其他地方，隐藏（带滑出动画）。效果图如下：

可适用于任何场景，如普通选项（如图）或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。

1. wxml代码

<view class="wrap">
  <view bindtap="showModal">
    <text>{
  {value}}</text>
    <icon class="arrow"></icon>
  </view>
 
  <!-- modal  -->
  <view class="modal modal-bottom-dialog" hidden="{
  {hideFlag}}">
    <view class="modal-cancel" bindtap="hideModal"></view>
    <view class="bottom-dialog-body bottom-