小程序底部弹窗css_微信小程序之animation底部弹窗动画（两种方法）

简单分享一下常用的底部弹窗层或下拉框弹出层(代码需要修改)的内容弹窗的动画效果，这里分享的是点击按钮后底部弹窗的动画效果。第一种方式是动态设置显示区域的高度，第二种方法是动态设置显示区域的移动的位置(使用到 transform:translateY )；

(一)实现效果

简单说明一下，两种方法实现的效果是一样的，只有点击按钮才能出发弹窗(指定位置)，弹窗弹出后，只有点击背景灰色区域弹窗才能收回，点击弹窗内容区域(粉红色部分是不能收回弹窗的)，自己可以自定义粉红色部分右上角关闭按钮。

(二)实现分析

第一种动态设置高度的方法是：需要一个容器为背景色(灰色区域)，一个容器为弹窗内容(粉红色区域)，两者是独立的，实现的原理是一样的；粉红色区域的话，就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式，动态设置内容区域的高度，比如弹出：一开始高度为0(隐藏了)，通过animation设置的动画时间，将高度从0到指定高度，内容慢慢就会显示了，然后保留最后一帧的动画样式就行了；收缩也是一样的道理。

第二种动态设置位置的方法是：需要一个容器为背景色(灰色区域)，一个容器为弹窗内容(粉红色区域)，两者是独立的，实现的原理是一样的；粉红色区域的话，就是设置好绝对位置(在屏幕的底部)和默认内容的区域样式，