Adicionar transição de blocos

Omar~ · Setembro 30, 2021

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.