css设置元素的隐藏与显示

效果图：

解决思路

通过transform的scale缩放元素从0-1，配合transiton实现动画效果。
transition: transform 0.5s;//设置过渡属性以及过渡时间
transform:scale(1);//设置缩放比例
transform-origin: top right; // 设置缩放顶点

代码

    let { eventShow} = this.state;

<div className={eventShow?styles.happendImg:styles.eventNone}>
              <div className={styles.helpPower}>
                <span>事件列表</span>
                <span className={styles.monitorBoxTopSpan1} onClick={this.setEventShow.bind(this)}>
                  <MinusOutlined />
                </span>
              </div>
              <div className={styles.itemFatherStyle}>特大</div>
            </div>
          ) : (
            <div className={styles.happendImg}>
              <div className={styles.helpPower}>
                <span style={{ fontSize: '16px' }}>事件详情</span>
                <button className={styles.goback} onClick={this.gobackClick.bind()}>
                  返回
                </button>
              </div>
              <div>
                <div className={styles.titleDiv}>
                  <span className={styles.title}>事件名称：</span>
                  <span className={styles.wenzi}>XXX化工厂发生爆炸</span>
                </div>
                <div className={styles.titleDiv}>
                  <span className={styles.title}>事件级别：</span>
                  <span className={styles.icon}>特大</span>
                </div>
                <div className={styles.titleDiv}>
                  <span className={styles.title}>事件描述：</span>
                  <span className={styles.wenzi}>
                    XXX化工厂由于违规操作引起爆炸，目前未造成人员伤亡但火势很大……
                  </span>
                </div>
                <img src={happen} className={styles.fireImg} />
              </div>
            </div>
          )}
          <div
            style={{ display: eventShow ? 'none' : 'block' }}
            className={styles.eventBtn}
            onClick={this.setEventShow.bind(this)}
          >
            <Tooltip title="事件列表">
              <img src={eventIcon} />
            </Tooltip>
          </div>

点击事件的方法

setEventShow() {
    let { eventShow } = this.state;
    this.setState({
      eventShow: !eventShow,
    });
  }
  setInfoShow() {
    let { infoShow } = this.state;
    this.setState({
      infoShow: !infoShow,
    });
  }

相关的css

.eventBtn {
  position: absolute;
  z-index: 12;
  right: 45px;
  top: 33px;
  overflow: hidden;
  -ms-overflow-style: none;
  /* Firefox */
  overflow: -moz-scrollbars-none;
  transition: transform 0.5s;
  transform:scale(1);
  transform-origin: top right;
}
.eventNone{
  position: absolute;
  z-index: 12;
  right: 45px;
  top: 33px;
  width: 281px;
  transform: scale(0);
  transition: transform 0.5s;
  transform-origin: top right;
}
.happendImg {
  position: absolute;
  background: white;
  z-index: 12;
  right: 45px;
  top: 33px;
  width: 281px;
  height: 350px;
  overflow: hidden;
  -ms-overflow-style: none;
  /* Firefox */
  overflow: -moz-scrollbars-none;
  transition: transform 0.5s;
  transform:scale(1);
  transform-origin: top right;
  }