Pesquisar na Comunidade
Mostrando resultados para as tags ''transition''.
Encontrado 4 registros
-
Transitar de uma página pra outra sem carregamento
Alessandro Bodão postou um tópico no fórum Desenvolvimento frontend
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.
-
Existe alguma maneira de fazer um transition em javascript??
Sapinn postou um tópico no fórum 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> -
Transition Height não funciona em UL
FabianoSouza postou um tópico no fórum Desenvolvimento frontend
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
