CSS-переход высоты меню при событии «показать / свернуть» - PullRequest
Новая
       12

CSS-переход высоты меню при событии «показать / свернуть»

0 голосов
/ 27 сентября 2019

Я работаю на горизонтальной навигационной панели со складным меню.Я использую bootstrap 4 и angular .Свертывание / отображение работает нормально при нажатии на значок меню, но я хочу связать некоторые CSS-переходы ( медленное изменение высоты ).Мой простой код здесь: 

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <a class="navbar-brand" href="#">SOME BRAND</a>
  <button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" (click)="toogle();" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>    
  <div class="navbar-collapse" id="menu" [ngClass]="activeClass ? 'show' : 'collapse'" data-parent="#toggler">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

Мой CSS: 

.on-slide-down {
    height: 500px;
}
#menu {
    transition: height 1.5s ease;
    height: auto;
    overflow: hidden;
}

И функция JS: 

toogle(){
    this.activeClass = !this.activeClass;
    let menu:HTMLElement = document.querySelector("#menu");
    menu.classList.toggle("on-slide-down");
  }

Так что моя идея состоит в том, чтобы динамически связатькласс .on-slide-down, который увеличивает высоту.К сожалению, переходы не работают.Свертывание и показ меню по-прежнему имеют поведение по умолчанию.Я делал это в соответствии с этим примером , но я не знаю, в чем проблема.

1 Ответ

1 голос
/ 27 сентября 2019

Почему бы просто не переопределить обычный переход коллапса Bootstrap?Таким образом, вам не нужны дополнительные JS:

https://www.codeply.com/go/WJmJoNIlbA

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">SOME BRAND</a>
    <button id="toggler" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="menu" data-parent="#toggler">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

CSS: 

#menu {
    transition: height 1.5s ease;
}
...