Como colocar estrutura de animate / effects de transição no appendto

[jackrs 0]

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/

[Michael Granados 0]

Talvez o que você quer fazer não precise de javascript: https://jsfiddle.net/5bL3kehj/

[jackrs 0]

Obrigado, porém eu utilizei de estruturas simples com cores para fazer o exemplo ficar mais claro.

 

A ideia é mudar divs de lugares numa estrutura próxima disso ( 4 blocos e alguns escondidos que vão trocar de lugar naquela estrutura ), e a ideia é que a troca delas entre si tenham uma transição mais "suave" não tão bruta.

 

próximo do exemplo que segue abaixo:

 

https://tympanus.net/Development/AnimatedResponsiveImageGrid/index2.html

 

 

 

[Michael Granados 0]

Hmmm... esse exercício é bom, ein...

 

Vamos pensar em um único caso, só duas imagens, uma em cima da outra esmaecendo e aparecendo "em cima" da outra... como poderiamos fazer...?

 

Imagino uma div com duas imagens dentro posicionadas absolutamente.... uma em cima da outra... com a mais em cima, partindo de transparência total, indo para 100% de opacidade... Pensei em uma estrutura como esta...

 

<div class="image-box">
  <img src="https://picsum.photos/id/1008/200/200" alt="" />
  <img src="https://picsum.photos/id/1012/200/200" alt="" />
</div>

E fazer a mágia da animação com CSS... aglo assim...

 

.image-box {
  position: relative; /* as imagens vão se basear na posição deste elemento para saber sua referencia no plano X, Y */
  width: 200px;
  height: 200px;
  display: inline-block; /* só para deixar uma do lado da outra */
}

.images-box > img {
  width: 200px;
  height: 200px;
}

@keyframes reveal { /* nossa animação, aqui vai o nome de referencia */
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.image-box > img + img { /* uma imagem que apareça depois de outra imagem... */
  position: absolute; /* posição absoluta, ou seja, fica "voando" sobre os
                         outros elementos, sua posição se baseia naquele position
                         relative lá em cima */
  top: 0;
  left: 0;
  
  animation: reveal 5s ease 5s 1 normal forwards;
  opacity: 0; /* precisa informar o valor inicial pra não ficar pulando... */
}

É... até que ficou bom... https://codepen.io/dgmike/pen/ZNrNvO?editors=1100

 

Agora, vamos colocar um javascript pra ficar legal... a animação leva em torno de 10s, 5s de espera e 5s de animação de fato (veja a referência do atributo animation). Então... vamos fazer com que o script remova a primeira imagem e adicione uma nova imagem depois, dando inicio a um novo ciclio.... que tal fazer isso em 15 segundos?

 

function changeImage() {
  setTimeout(function () {
    var boxes = document.querySelectorAll('.image-box');
    var box = Array.from(boxes).sort(function(){ return (.5 - Math.random()); })[0]; // pega um aleatório

    if (box.querySelectorAll('img').length > 1) { // se só tiver 1 imagem, a gente não remove ela
      var firstImage = box.querySelector('img');
      firstImage.parentNode.removeChild(firstImage); // remove a anterior
    }
    
    var img = document.createElement('img');
    // abaixo, geramos uma imagem aleatória
    img.src = 'https://picsum.photos/id/' + parseInt(Math.random() * 1000) + '/200/200';
    img.alt = '';
    
    box.appendChild(img); // e por fim, colocamos a imagem na box
    
    changeImage(); // e chamamos de novo, só pra não acabar nunca....
    
  }, 15000); // 15 segundos...
}


changeImage(); // o inicio é no fim...

Bom, já coloquei pra escolher uma caixa aleatória... mas acho que dá pra melhorar como colocar o tempo de 15 segundos aleatório entre 15 e 20... escolher mais de uma imagem por vez... bom, agora é contigo...

 

Ah, segue a versão até agora.... https://codepen.io/dgmike/pen/KLQLBd?editors=1011

 

Qualquer coisa, grita!

 

---

 

Referencias

https://www.w3schools.com/cssref/css3_pr_animation.asp

[jackrs 0]

Obrigado.

 

Tenho meio que um limitador na estrura, que no caso é mostrar 4 dessas divs e dps ir mostrando as demais cadastradas numa estrutura, então vou listar todas e depois ir "misturando" elas.

 

 vou avaliar como vai ser o funcionando de X em X tempo fazer algo proximo de hide() numa div e visible() nessa outra com ajax e utilizando de transitions/fades para ficar melhor visualmente, porem obrigado.

 

Mas a minha ideia era ter algo próximo do exemplo abaixo, porém com muito menos codigo.

 

https://github.com/codrops/AnimatedResponsiveImageGrid

[jackrs 0]

Tentei implementar com animate(), fade(), porém mesmo assim não obtive sucesso.

 

Será que somente com essa estrutura de mostrar 4 e esconder 4 div com informações diferentes futuramente, consigo realizar esse shuffle entre as divs com animação de fadein/fadeout aleatoria?

 

https://jsfiddle.net/h2av6nct/