小程序CSS实现抽屉式按钮弹出拉伸特效

先上效果图

实现思路及问题

• 通过动态更改容器的高度，结合overflow：hidden属性动态显示
• 容器使用flex布局(关于flex布局，可以参考阮一峰大牛的flex教程)，由于需要按钮上弹，可以让子元素从下往上布局，将flex-derection设置为column-reverse;另外flex子元素默认缩小(flex-shrink)的，可以直接将flex设置为none，即不放大也不缩小。
• 后面只是一个简单的animation动画，并没有什么复杂的
• 由于不希望界面一打开就出现动画，我并没有直接赋值false或者true，而是先赋值null，然后点击后再赋值0和1。这样就不会一开始就出现动画了。

下面是代码

index.wxml

<view class='pop-box {{unfold==0?"on":""}} {{unfold==1?"off":""}}'>
  <view bindtap='unfold'>点我</view>
  <view>222</view>
  <view>333</view>
</view>

index.wxss

.pop-box {
  width: 120rpx;
  height: 120rpx;
  border: 1rpx solid pink;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  overflow: hidden;
  position: fixed;
  bottom: 100rpx;
  right: 50rpx;
}

.pop-box>view {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: none;
}

.pop-box>view:nth-child(1) {
  background-color: rgb(243, 81, 17);
}

.pop-box>view:nth-child(2) {
  background-color: rgb(192, 255, 245);
}

.pop-box>view:nth-child(3) {
  background-color: rgb(128, 32, 218);
}

@keyframes unfold {
  0% {
    height: 120rpx;
  }

  80% {
    height: 500rpx;
  }

  100% {
    height: 420rpx;
  }
}

@keyframes shrink {
  0% {
    height: 420rpx;
  }

  20% {
    height: 500rpx;
  }

  100% {
    height: 420rpx;
  }
}
.on {
  height: 420rpx;
  animation: unfold 1.2s 1 ease-out;
}
.off {
  height: 120rpx;
  animation: shrink 1.2s 1 ease-out;
}

index.js

data: {
    unfold: null //0为展开，1为收缩
  },
    unfold() {
    var unfold = this.data.unfold
    if (unfold === null) { //默认为收缩
      unfold = 1   
    }
    if (unfold == 0) {   //点击后改变展开样式
      unfold = 1
    } else {
      unfold = 0
    }
    this.setData({  //赋值
      unfold: unfold
    })
  }

github

个人博客