效果图：

我尝试了微信提供的API wx.animation去实现这个功能，但很是麻烦，而且对于我这刚接触小程序的渣渣而言，实现起来也很是困难。所以我换了种方法，采用CSS的动画去实现。

wxml:

<image class='fabiao' src='../icon/fabiao2.png' bindtap='fabiao'></image>
<!--触发下拉框的组件，我这里是一个发表图标-->

<view class='zhezhao' hidden="{{flag}}"><!--这是一个遮罩层，在框弹出后遮住框外区域--></view><!--这是下拉框中的内容，一个文本框和一个按钮，按钮触发拉起事件，表示拉起下拉框--><view class="test3 {{test=='test1'?'test1':'test2'}}" style='display:{{yesorno}};'><view class='input-content'><textarea class='ta' placeholder="元芳，有何要说的么？" auto-focus /></view><button class='btn' bindtap='laqi'>发表</button></view>

WXSS：

.zhezhao {position: fixed;width: 100%;height: 100%;top: 0px;background: rgba(0, 0, 0, 0.4);overflow: hidden;
}@keyframes myfirst {from {transform: translateY(-860rpx);}to {transform: translateY(0rpx);}
}@keyframes mylast {from {transform: translateY(0rpx);}to {transform: translateY(-900rpx);}
}.test2 {animation: mylast;animation-duration: 1s;animation-iteration-count: 1;animation-fill-mode: forwards;width: 750rpx;height: 860rpx;border: 2rpx solid #ededed;position: absolute;top: 0;left: 0;z-index: 1454;background-color: #fff;
}.test1 {animation: myfirst;animation-duration: 0.5s;animation-iteration-count: 1;animation-fill-mode: forwards;width: 750rpx;height: 860rpx;border: 2rpx solid #ededed;position: absolute;top: 0;left: 0;z-index: 1454;background-color: #fff;
}.btn {width: 700rpx;height: 100rpx;position: absolute;bottom: 0;left: 0;margin: 10rpx;margin-left: 25rpx;}.test3{display: flex;flex-direction: column;background-color: #ededed;}.input-content{width: 100%;height: 400rpx;border:2rpx solid #ededed;margin-left: auto;margin-right: auto;margin-bottom: 40rpx;background-color: #fff;
}.ta{width: 650rpx;height: 250rpx;margin-bottom: 20rpx;margin-top: 110rpx;/* border: 8rpx solid red;  */margin-left: auto;margin-right: auto;}

JS：

data{animate: 'myfirst',yesorno: 'none',flag: true,test:'test1'}fabiao: function () {this.setData({yesorno: 'block'})this.setData({test: 'test1'})this.setData({flag: false})},laqi: function () {this.setData({test: 'test2',})this.setData({flag: true})}