Estou fazendo um Navbar onde ele vai diminuir a altura e mudar a cor no evento de scroll. Meu problema está em deixar essa transição suave. Consegui fazer para para a cor, mas não para a altura. Como posso deixar a mudança de altura suave?
$(window).on('scroll', function(event) {
if ($(window).scrollTop()) {
$('.navbar').addClass('bg-dark');
$('.navbar').removeClass('bg-primary teste');
} else {
$('.navbar').removeClass('bg-dark');
$('.navbar').addClass('bg-primary teste');
}
if ($(window).scrollTop() > 100) {
$('.navbar').removeClass('teste');
} else {
$('.navbar').addClass('teste');
}
});
nav {
transition: 2s all ease-in-out;
}
.navbar.teste>.container {
min-height: 54px;
}
.navbar.teste>.container>.navbar-brand {
padding: 0 15px;
height: 54px;
line-height: 54px;
}
.navbar.teste>.container>.navbar-brand>.navbar-toggle {
margin-top: 18px;
padding: 9px 10px !important;
}
@media (min-width: 768px) {
.navbar.teste>.container>div>.navbar-nav>li>a {
padding-top: 16.5px;
padding-bottom: 16.5px;
line-height: 16px;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar teste fixed-top navbar-expand-sm navbar-dark bg-primary px-0">
<div class="container">
<a class="navbar-brand" href="#">Marca</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active"><a class="nav-link" href="#">Projetos</a></li>
<li class="nav-item"><a class="nav-link" href="#">Notícias</a></li>
<li class="nav-item"><a class="nav-link" href="#">Eventos</a></li>
<li class="nav-item"><a class="nav-link" href="#">Biblioteca</a></li>
</ul>
</div>
</div>
</nav>
<h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1><h1>Teste</h1>