微信小程序自定义上往下拉

<image class='fabiao' src='../../images/all.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>

css

.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

// packageA/mybroker/mybroker.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    animate: 'myfirst',
    yesorno: 'none',
    flag: true,
    test:'test1'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

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

})

小程序-缩放平移等动画Animation - 简书