Design sketch:

I tried the API wx.animation provided by wechat to realize this function, but it was very troublesome, and it was also very difficult for me, who just contacted with the slag of the small program, to realize it. So I changed the way, using CSS animation to achieve.

wxml:

<image class='fabiao' src='../icon/fabiao2.png' bindtap='fabiao'></image>
<! -- trigger the component of the drop-down box. Here is a publish icon -- >

<view class='zhezhao' hidden="{{flag}}">
  <! -- this is a mask layer, covering the area outside the box after the box pops up -- >
  </view>
  <! -- this is the content of the drop-down box, a text box and a button. The button triggers the pull-up event, indicating the pull-up drop-down box -- >
  <view class="test3 {{test=='test1'?'test1':'test2'}}" style='display:{{yesorno}};'>
    <view class='input-content'>
      < textarea class ='ta 'placeholder = "Yuanfang, what can I say? " auto-focus />
    </view>
    < button class ='btn 'bindtap ='laqi' > published < / 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
    })
  }