translate3d，动画，向下移是正的，向上移是负的

translate3d，向下移是正的
向上移是负的

.houseList {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 330px;
  transition: all 1s;
  transform: translate3d(0, 330px, 0);
  background: #fff;
}
.show {
  transform: translate3d(0, 0, 0);
}

<div
          className={[
            styles.houseList,
            this.state.isShowList ? styles.show : ''
          ].join(' ')}
        >
          <div className={styles.titleWrap}>
            <h1 className={styles.listTitle}>房屋列表</h1>
            <Link className={styles.titleMore} to="/home/list">
              更多房源
            </Link>
          </div>

          <div className={styles.houseItems}>
            {/* 房屋结构 */}
            {this.state.housesList.map(item => (
              <div className={styles.house} key={item.houseCode}>
                <div className={styles.imgWrap}>
                  <img
                    className={styles.img}
                    src={`http://localhost:8080${item.houseImg}`}
                    alt=""
                  />
                </div>
                <div className={styles.content}>
                  <h3 className={styles.title}>{item.title}</h3>
                  <div className={styles.desc}>{item.desc}</div>
                  <div>
                    {item.tags.map(tag => (
                      <span
                        className={[styles.tag, styles.tag1].join(' ')}
                        key={tag}
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                  <div className={styles.price}>
                    <span className={styles.priceNum}>{item.price}</span> 元/月
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>