我相信这是很正常的，过渡只适用于对CSS的更改，而不适用于计算的更改。
一个选项可能是有一个嵌套的div，在外部的overflow: hidden上设置overflow: hidden，然后获得内部的overflow: hidden的计算高度，并在外部的overflow: hidden上设置它以获得过渡。
CSS：

# outer {

    margin-top: 30px;
    background-color: skyblue;
    width: 300px;
    transition: all linear 0.5s;
    overflow: hidden;
}

于飞：

<button id="more" onclick="increase();">More</button>
<button id="more" onclick="decrease();">Less</button>
<div id="outer">
    <div id="inner">
        lorem ipsum
    </div>
</div>

JS：

function increase()
{
    var o = document.getElementById('inner');
    var t = o.innerHTML;
    for (var i=0 ; i<20;i++)
        t += " lorem ipsum";
    o.innerHTML = t;
    adjustHeight();
}

function decrease()
{
    var o = document.getElementById('inner');
    o.innerHTML = "lorem ipsum";
    adjustHeight();
}

function adjustHeight()
{
    var i = document.getElementById('inner');
    var o = document.getElementById('outer');

    o.style.height = window.getComputedStyle(i).height;
}

工作提琴：http://jsfiddle.net/Lnts7w1f/

在@jcaron answer的帮助下，我设法在一个react组件中排序了这个。所以当'activeSubsection'按钮被点击时，useEffect钩子就会运行。

const [topicsHeight, setTopicsHeight] = React.useState("0px")
    const topicsDiv = React.useRef();

    React.useEffect(() => {

        setTopicsHeight(topicsDiv?.current?.offsetHeight + "px")

    }, [activeSubsection])

    {!hideTopics && 
        <div style={{ overflow: "hidden", height: topicsHeight, transition: "0.2s" }}>
          <Topics ref={topicsDiv} className="largeScreen">
            {!!subsectionTopics && subsectionTopics.sort((a, b) => a.node.slug.localeCompare(b.node.slug)).map((topic, index) =>
              <Link key={index} href={'/'+slug+'/'+topic.node.slug} scroll={false}>
                <Topic
                  active={activeTopic == topic.node.slug} transition={true} bold={activeTopic == topic.node.slug}
                >
                  {topic.node.title}
                </Topic>
              </Link>
            )}
          </Topics>
        </div>
    }

显然，这不是完整的组成部分，但希望足以给予你一个想法。

嗯......有个小窍门你可以做......我不知道它是否适合你的需要。
css过渡效果应用于具有先前值的css属性，然后改变。虽然你确实改变了div内容的高度，但实际的css属性height并没有显式改变。这就是为什么你没有得到动画。
一种解决方法是找到div的内部高度，然后将其设置为元素，使其具有动画效果。我已经为此创建了一个函数，并添加了一个span来控制div的内部大小。
只需在每次更改时调用该函数：

<div class='content'>
  <span id="height-control">
    {{ctrl.content}}
  </span>
</div>

JS功能：

var spn = document.getElementById("height-control");
  var UpdateHeight = function () {
      var h = spn.offsetHeight;
      spn.parentNode.style.height = h + "px";
  };

http://plnkr.co/edit/p6QRAR5j4C8d0d0XRJRp?p=preview