1

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');
        }
    });

1 Resposta 1

0

Descobri o problema. A transição não funciona quando determino um valor auto na propriedade.

No meu caso tinha um width: auto. Troquei pelo valor real da imagem e o transition funcionou.

Acredito que isso é para todos os casos.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .