Boa noite irmandade!
 
Ando reparando de alguns anos pra cá, uma forte tendência em que sites bem dinâmicos e interativos transitam de uma página pra outra sem que a outra página se quer passe por um processo de carregamento, você clica, simplesmente acontece algumas transições nos elementos da página, e de repente, você está em outra página, outro url. De forma suave, nada é carregado, apenas algo acontece e você já está em outra página.
 
Gostaria de saber como isso é feito pra aplicar em um site que estou desenvolvendo, se é algum framework, alguma ferramenta além do JavaScript...
 
Trouxe um belo exemplo: https://www.traffic.productions/
 
Se você chegou até aqui, agradeço desde já!

Estou com uma tarefa aqui e não estou conseguindo criar uma lógica para adicionar uma transição entre os elementos.
Segue da seguinte forma:
Tenho uma caixa central que irá abrigar 3 ou mais caixas. Cada caixa filha tem exatamente as mesmas dimensões da paixa mãe. Ao executar a função a caixa que está ao centro move-se para esquerda e a da direita também assumindo a posição da caixa anterior. Quando por exemplo antes de chegar a última filha, a primeira que se moveu toma o lugar da ultima assim tornando-se uma espécie de loop infinito. Ou seja depois da última filha a primeira toma o lugar dela para que a atual última possa se mover ao centro.  
Exemplo:
  / [1]  / [2] - [3]
"clicou em avançar torna essa sequência"
[1]  / [2] / [3]
 
Até aqui tudo bem, bastando eu clonar a primeira caixa atual, remover-la então logo em seguida adicionar a cópia no final.
Porém aqui que entra a questão pois teria que adicionar uma animação de transição, de forma que que as caixas movam-se lentamente para esquerda.
 
Aqui está o esboço de teste:
HTML:
 
CSS:
 
Javascript:
 
Eu pensei em recursos como marginLeft e translateX, mas em ambos casos sempre terei o problema que se eu mover negativamente as caixas, ao remover qualquer uma que é o caso da primeira ir para último, todas as demais caixas vão ficar fora da caixa central.
 
Quem tiver alguma ideia como adicionar essa transição de movimento, ficaria grato com a ajuda. 

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>
 
 

Estou tentando fazer algo simples: redimensionar a altura de uma UL, usando classList.toggle (javascript).
Percebo que, se no CSS eu tentar aplicar o estilo em cascata, não faz efeito na UL só por estar dentro de uma DIV.
 
Se no CSS eu colocar:
.cnt-filtro-body ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;     transition: height 0.5s; background-color:#FF0; display:block;  pra estilizar somente ULs que estejam dentro da DIV que tem a classe chamada cnt-filtro-body, a coisa não funciona.
Só funciona se partir direto da ul, assim:
ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden;     transition: height 0.5s; background-color:#FF0; display:block;   
Vejam o código.
<!DOCTYPE html> <html> <head> <style> .cnt-filtro-body{position:relative; height:50px; width:100%; } .secao-toggle{height:160px; display:block; float:left; position:relative;} ul{ list-style:none; position:relative; float:left; width:100%; height:0px; overflow:hidden; transition: height 0.5s; background-color:#FF0; display:block; } </style> </head> <body> <button onclick="myFunction()">Clique aqui</button> <div class="cnt-filtro-body"> <ul id="myDIV"> This is a DIV element. </ul> </div> <script> function myFunction() { var element = document.getElementById("myDIV"); element.classList.toggle("secao-toggle"); } </script> </body> </html> Minha necessidade é: estilizar apenas UL que estejam dentro da DIV que esteja usando a classe cnt-filtro-body

Gostaria de saber como consigo colocar um animate/effect de transição mais "suave" na troca das divs do código anexo.
https://jsfiddle.net/h2av6nct/