手风琴最大高度过渡不起作用

Question

当我单击以下类别的元素时，我已经切换了一个类别：active & non-active

以下是我定义类的方式：

toggle-item {
  .active {
      max-height: 100%;
      -moz-transition: 5s ease-in-out;
      -ms-transition: 5s ease-in- out;
      -o-transition: 5s ease-in-out;
      -webkit-transition: 5s ease-in-out;
      transition: 5s ease-in-out;
   }

   .not-active {
      overflow: hidden; 
      max-height: 0;
   }
}

这是html

<toggle-item auto-height="">
<ion-row align-items-center="" class="osi-toggle-item row border-top-bottom" clickable="" tappable="" tabindex="1" type="button">

    <ion-col class="col" text-left="">
        <div>
            <span class="font-li-head active">Praktische zaken</span>
        </div>

    </ion-col>
    <ion-col class="col" col-auto="" text-right="">
        <button clear="" clickable="" icon-only="" ion-button="" item-right="" class="active button button-md button-clear button-clear-md" aria-label="Dichtklappen" title="Dichtklappen" tabindex="1" type="button"><span class="button-inner">

        <i class="material-icons">expand_less</i>

    </span>
            <div class="button-effect"></div>
        </button>

    </ion-col>

</ion-row>

<ion-row class="row active">
    <ion-col class="col">
        <div body="">
            <div class="osi-ion-item" clickable="" tabindex="1" type="button" aria-label="Test test test test?">
                <ion-row class="row">
                    <ion-col class="osi-content-col col">
                        <a class="disable-hover" target="_blank" href="https://www.test.nl/">

                            <osi-li-h>
                                <osi-label aria-hidden="true" classes="font-li-head">
                                    <label ion-text="" class="font-li-head">
                                        Test test test test?
                                    </label>
                                </osi-label>
                            </osi-li-h>
                        </a>
                    </ion-col>
                </ion-row>
            </div>
        </div>
    </ion-col>
  </ion-row>
</toggle-item>

在这里创建平滑过渡时我在做什么错了？