Existe alguma maneira de fazer um transition em javascript??

[Sapinn 0]

Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.

 

Codigo js 

 

window.onscroll = function(){
    var top = window.pageXOffset || document.documentElement.scrollTop
    var barra = document.querySelector(".barra");

    if(top > 900){
        barra.style.display = 'flex';

//aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
        barra.classList.add('transition');
    }else{
       barra.style.display = 'none';

    }
}

 

 

Codigo css

.barra{
    width: 100%;
    height: 70px;
    background-color: #090b13;
    display: none;
    justify-content: space-between;
    position: fixed;
    opacity: 0;
}
.transition{
    transition: 1s;
    opacity: 0.7;
    
}

 

codigo HTML

 

<div class="barra" >
        <img src="assets/images/logo-nopad.svg" alt="">
        <button class="botao-assinatura-header">Assine Agora</button>
  </div>

 

 

[Omar~ 87]

<style>
    .barra {
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: #090b13;
        opacity: 0;
        transition: .8s; /* Deixe o contador de aqui para ter efeito fade-in & fade-out */
        pointer-events: none /* Não interagir com click's quando estiver invisível */
    }
    .transition {
        opacity: .7;
        pointer-events: auto
    }
</style>
<div style="height: 1900px"></div>

<div class="barra">
    Lorem ipsum dolor sit amet
</div>

<script>
    var rolagem = 0;
    var barra = document.querySelector('div.barra');

    document.addEventListener('scroll', rolarPagina, false);

    function rolarPagina(e) {
        rolagem = window.scrollY;
        if (rolagem > 900) {
            barra.classList.add('transition');
        } else {
            barra.classList.remove('transition');
        }
    }
</script>

 

[Sapinn 0]

Deu certo agora vlw meu patrão.