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>