Existe alguma maneira de fazer um transition em javascript??

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>