Ir para conteúdo

POWERED BY:

Omar~

Adicionar transição de blocos

Por , em Javascript

Recommended Posts

Omar~    87

Omar~
Postado

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:

Spoiler 

<!DOCTYPE html>
<html>
    <head>
        <title>Teste</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css.css" rel="stylesheet" type="text/css"/>
        <style>
            *, :after, :before {margin:0; padding:0; box-sizing:border-box}
            .vermelho {background-color: red}
            .verde {background-color: green}
            .azul {background-color: blue}
        </style>
    </head>
    <body>
        <div style="padding: 50px; border: 5px solid black; width: 400px; margin: auto">
            <div id="exemplo">
                <ul>
                    <li class="vermelho">VERME</li>
                    <li class="verde">VERDE</li>
                    <li class="azul">AZUL</li>
                </ul>
            </div>
            <button onclick="executar()">Avançar</button>
        </div>

        <script src="js.js" type="text/javascript"></script>
    </body>
</html>

 

 

CSS:

Spoiler 

#exemplo {
    position: relative;
    border: 5px solid pink;
    width: 100%;
    height: 200px;
    margin: auto;
    box-sizing: content-box;
    /*overflow: hidden >>> Será adicionado depois  */
}

ul {
    list-style: none;
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: row
}

ul > li {
    flex-shrink: 0;
    flex-grow: 1;
    width: inherit;
    height: auto;
    position: relative;
    word-wrap: break-word;
    white-space: nowrap
}

 

 

Javascript:

Spoiler 

var tagDIV = document.getElementById('exemplo');
var largura = Math.ceil(tagDIV.offsetWidth);
var tagUL = tagDIV.querySelector('ul');
var tagLI = tagDIV.querySelectorAll('li');

tagDIV.setAttribute('style', 'width:' + largura + 'px; margin: 0');
tagUL.setAttribute('style', 'width:' + largura + 'px; margin: 0');
tagLI.forEach(function (e) {
    e.setAttribute('style', 'width:' + largura + 'px; margin: 0;');
});

function executar() {
    var primeiro = tagDIV.querySelectorAll('li')[0];
    var copia = primeiro.cloneNode(true);
    
    tagUL.appendChild(copia);
    tagUL.removeChild(primeiro);
}

 

 

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. 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • Alessandro Bodão
      Transitar de uma página pra outra sem carregamento
      Por Alessandro Bodão
      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á!
    • Sapinn
      Existe alguma maneira de fazer um transition em javascript??
      Por Sapinn
      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>
       
       
    • FabianoSouza
      Transition Height não funciona em UL
      Por FabianoSouza
      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
    • jackrs
      Como colocar estrutura de animate / effects de transição no appendto
      Por jackrs
      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/
    • Carlos Web
      Simples CSS Button Div transition
      Por Carlos Web
      Olá, pessoal, boa tarde !!
       
      Estudei toda uma apostila sobre CSS, porém não estou conseguindo realizar uma simples tarefa !!
      Ao passar o mouse no 'button.botao', ativar o movimento do 'div.traco' ! Eis abaixo o 'Código Fonte' que estou tentando:

       
      <!DOCTYPE html> <html> <head> <style> button.botao { width: 150px; height: 50px; border: none; background-color: black; color: red; font-size: 23px; } div.traco { width: 20px; height: 10px; background: red; -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s; } button.botao:hover div.traco { width: 150px; } </style> </head> <body> <button class="botao">Botao</button> <div class="traco"></div> </body> </html> Me ajudem por favor !
      Obrigado !!
×

Informação importante

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

  Aceito