大家可以先看下官網小程式apianimation:https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html，看完之後推薦看一下http://www.jb51.net/article/102263.htm講animation的文章，上面寫的很詳細

原始碼如下：（直接複製到一個wepy檔案中就可以使用了）

<template>
  <view class="shop-cart">
    <button class="show-btn" @tap="show">
 
展示</button>
    <view class="demo" animation="{{animationData}}">
      <button class="btn" @tap="hide">X</button>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'

export default class ShopCart extends wepy.page {
  config = {
    navigationBarTitleText: '購物車'
 

  };
  components = {
  };

  mixins = [];

  data = {
    animationData: {}
  }

  computed = {}

  methods = {
    show () {
      this.animation.height('200rpx').step()
      this.setData({
        animationData: this.animation.export()
      })
    },
    hide() {
      this.animation.height(0).step()
      this
 
.setData({
        animationData: this.animation.export()
      })
    }
  }

  events = {}
  onLoad() {
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    this.animation = animation

  }
}
</script>
<style lang="less">
  .demo {
    width: 100%;
    height: 0rpx;
    background: pink;
    position: absolute;
    bottom: 0;
    .btn { width: 30rpx;
      height: 30rpx;
      color: #000;
      font-size: 10rpx;
      position: absolute;
      top: 0;
      right: 0;
    }
  }
</style>