Аккордеон переход макс-высота не работает

Я должен переключить класс при нажатии на элемент, который является следующими классами: 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>

Что я здесь делаю не так, чтобы создать плавный переход?

пожалуйста, загрузите свой html-код или загрузите свой полный код в любой редактор кода, например codepen или jsfiddle

Gaurav 31.10.2018 12:46

100% от какие?. Если у родителя нет определяемой высоты, это не сработает.

Paulie_D 31.10.2018 12:48

@Gaurav done имейте в виду, что это ионный компонент

Sireini 31.10.2018 13:02

переход: макс-высота 5 сек, легкость входа-выхода;

vssadineni 31.10.2018 13:06

Вам следует ввести "ion-row {& .active {} & .not-active {}}", потому что вы используете .active и .not-active в том же селекторе, а не внутри элемента. Также добавьте «display: block;» потому что это не рекомендованный W3C тег, поэтому браузер не знает, что это блочный или встроенный элемент типа.

Hanif 31.10.2018 13:06

@Hanif отредактируйте часть scss. Мне не нужен &, и где мне добавить display: block?

Sireini 31.10.2018 13:24

Опять же, max-height:100% не будет работать, если вы не знаете, что он на 100%. Просто используйте вместо этого большое число.

Paulie_D 31.10.2018 15:57
0
7
131
0

Другие вопросы по теме