Crear animaciones de carga jerárquica de diseño de materiales mediante JavaScript y CSS3

Vista prévia

Descripción

Hace uso de las transiciones/transformaciones de JavaScript y CSS3 para crear efectos jerárquicos de carga en un conjunto de cuadrículas. Inspirado en el diseño de material de Google < a href = "https://www.google.com/design/spec/animation/meaningful-transitions.html # significativas-transiciones-jerárquica-temporización" target = "_ blank" rel = "noopener" > sincronización jerárquica .

Funcionamiento

Cree una lista de elementos que se animarán en uno por uno.

<ul>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>

<li class="demo"></li>
</ul>

El CSS/CSS3 requerido para las animaciones de transición de temporización jerárquica.

* { box-sizing: border-box; }

ul { list-style-type: none; }

li {

float: left;

width: 10%;

height: 50vh;

background: lightskyblue;

-moz-transform: scale(0);

-webkit-transform: scale(0);

transform: scale(0);

opacity: 0;

border-bottom: 2px solid #b8e2fc;

-moz-transition: all .3s ease-out;

-webkit-transition: all .3s ease-out;

transition: all .3s ease-out;
}

li:nth-child(odd) { background: #56baf8; }

li.show {

opacity: 1;

-moz-transform: scale(1);

-webkit-transform: scale(1);

transform: scale(1);
}

El JavaScript.

var item = document.querySelectorAll('.demo');

(function animate(counter) {



setTimeout(function() {



item[counter].classList.add('show');



counter++;



if(counter < item.length) animate(counter);


}, 60);


})(0);