为什么更改`transform-origin`属性不会改变转换元素的位置？

Question

我使用以下css规则成功设置了自定义下拉容器的动画：transition: all .1s ease-in-out;。但是，当我希望我的变换原点位于顶部而不是底部时。我设置了以下规则：transform-origin: top;，但它似乎仍然是从底部渲染。

=== CSS ===

  .list-item {
    text-align: left;
    list-style: none;
    border-bottom: 1px solid get-color-by-tone(gray, 6);
    height: 2rem;
    font-size: 14px;
    cursor: pointer;
    transition: all .1s ease-in-out;
    transform-origin: top;
  }

  .list-container {
    border: 1px solid get-color-by-tone(gray, 6);
    background: get-color-by-tone(gray, 1);
    padding-left: 0;
    margin-top: -2rem;
    position: absolute;
    max-height: 20rem;
    box-shadow: 0 0 6px 0 rgba(128,128,128,1.0);
  }

  .checkmark {
    display: inline-block;
    float: right;
    font-size: 1rem;
   }

  .empty-list-container {
    height: 0;
  }

=== JSX ====

 {this.props.isListsDropDownOpen ?
      (<ul className="list-container">
        {
          this.props.dropdownValues.map((item, i) => {
            return this.props.textValue === item ?
              (<li className="list-item" key={i}>{item}<span 
               className="checkmark">✓</span></li>):
              (<li className="list-item" key={i}>{item}</li>)
          })
        }
      </ul>):
      <ul className="empty-list-container"></ul>
    }