如何将CSS转换添加到我的jQuery选项卡？

Question

所以我设置了一个带有以下jQuery代码的标签系统。现在我想让内容更改顺利我尝试添加一个过渡：所有0.3s轻松;对于div，但没有运气，我哪里出错？

$(document).ready(function(){
    $(".icon").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $(".icon.active").removeClass("active");
            $(this).addClass("active");
            $(".pos__content-item.active").removeClass("active");
            $(".pos__content-item:nth-child("+nthChild+")").addClass("active");
        }
    });
});

CSS

      .pos__content-item {
        display: none;
            transition: all 0.3s ease;
      }
      .pos__content-item.active {
        height: 20em;
        display: flex;
        align-items: center;
        margin: 0 auto;
        padding: 5em 0em;
            transition: all 0.3s ease;
        @media (max-width: 1000px) {
          height: 30em;
        }