Estou escrevendo o código abaixo e não está funcionando a parte do transition
.
A classe .menu-fixed
eu aplico via javascript. A animação quando abre o site. A animação funciona, mas quando eu aplico a classe que contém o transition
não funciona.
Eles não funcionam juntos num mesmo elemento ?
CSS
&.fundo-menu{
position: absolute;
left: 0;
right: 0;
top: -500px;
opacity: 0;
margin: auto;
width: auto;
animation-name: LogoTorcaneDesce;
animation-timing-function: ease;
animation-duration: 2s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
transition: all 0.8s ease;
&.menu-fixed{
width: 230px;
}
}
JS
var MenuHeaderBox = $("header#header, nav.menu, .fundo-menu, .logo-menu");
$(window).scroll(function(){
if($(this).scrollTop() > 300){
MenuHeaderBox.addClass('menu-fixed');
}else{
MenuHeaderBox.removeClass('menu-fixed');
}
});