Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''transition''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Calendários

  • Comunidade iMasters

Todas as áreas do Fórum

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento Web
    • Desenvolvimento frontend
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets e outros ambientes
    • Desenvolvimento com Wordpress
    • Desenvolvimento de apps
    • Desenvolvimento ágil
    • Desenvolvimento de Games
    • Banco de Dados
    • Design e UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • Boteco iMasters

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 5 registros

  1. 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á!
  2. Omar~

    Adicionar transição de blocos

    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.
  3. 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>
  4. FabianoSouza

    Transition Height não funciona em UL

    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
  5. 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/
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.