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:
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.Discussão (0)
Carregando comentários...