El CSS moderno tiene excelentes formas de posicionar y mover un grupo de elementos entre sí, p. posicionamiento del ancla. Dicho esto, en algunos casos podría ser mejor realizar pequeñas animaciones a la antigua usanza, ahorrando tiempo y esfuerzo.
Siempre podemos influir en la estructura de un elemento, como cambiar su tamaño y rotarlo. Cuando cambiamos el tamaño intrínseco de un elemento, sus elementos secundarios también se ven afectados. Esto es algo que podemos aprovechar.
Supongamos que hay varios círculos que deben estar cerca uno del otro o cruzarse. Algo como esto:
Nuestro marcado podría ser tan simple como <main> Un elemento que contiene cuatro elementos secundarios. .circle Elementos:
<main>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</main>En cuanto a rotar cosas, hay dos opciones. Podemos (1) ser <main> contenedor principal, o (2) animar cada contenedor .circle solo.
Probablemente sea mejor abordar la primera opción ya que cada opción requiere animación. .circle En lugar de una sola animación, es necesario definir y configurar varias animaciones. Antes de hacer esto, debemos asegurarnos de que cada .circle incluido en <main> elementos y luego posicionar absolutamente cada elemento dentro de él:
main {
contain: layout;
}
.circle {
position: absolute;
&:nth-of-type(1){
background-color: rgb(0, 76, 255);
}
&:nth-of-type(2){
background-color: rgb(255, 60, 0);
right: 0;
}
&:nth-of-type(3){
background-color: rgb(0, 128, 111);
bottom: 0;
}
&:nth-of-type(4){
background-color: rgb(255, 238, 0);
right: 0;
bottom: 0;
}
}si rotamos <main> elemento que contiene un círculo, entonces podemos crear un específico .animate Clases utilizadas sólo para rotación:
/* Applied on <main> (the parent element) */
.animate {
width: 0;
transform: rotate(90deg);
transition: width 1s, transform 1.3s;
}…luego configúrelo <main> Elementos que utilizan JavaScript cuando se hace clic en un botón:
const MAIN = document.querySelector("main");
function play() {
MAIN.className = "";
MAIN.offsetWidth;
MAIN.className = "animate";
}Parece que estamos animando cuatro círculos, pero lo que realmente estamos haciendo es rotar el contenedor principal y cambiar su ancho, lo que también rota y aplasta todos los círculos dentro de él:
cada .circle se fijan en las esquinas correspondientes <main> Tener un padre absolutamente posicionado. Cuando la animación se activa en el elemento principal, es decir <main> conseguir .animate Clase cuando se hace clic en el botón – <main> ancho reducir y rotar 90deg. Esa contracción tira de cada .circle más cerca de <main> El centro del elemento, la rotación hace que los círculos intercambien posiciones a medida que se cruzan entre sí.
Este enfoque facilita la animación y la gestión de efectos simples. Incluso puedes superponer la animación de cada elemento individual para obtener más variación, como dos cuadrados que se cruzan durante la animación.
/* Applied on <main> (the parent element) */
.animate {
transform: skewY(30deg) rotateY(180deg);
transition: 1s transform .2s;
.square {
transform: skewY(30deg);
transition: inherit;
}
}¿Viste eso? padres <main> elementalista 30deg inclinar y girar a lo largo del eje Y, mientras los dos niños .square Los elementos contrarrestan esta distorsión con la misma desviación. El resultado es que ves los subcuadrados cambiar de posición a medida que se alejan unos de otros.
Si queremos que los cuadrados formen separación sin voltear, podemos hacer lo siguiente:
/* Applied on <main> (the parent element) */
.animate {
transform: skewY(30deg);
transition: 1s transform .2s;
.square {
transform: skewY(-30deg);
transition: inherit;
}
}Esta vez, <main> inclinación del elemento 30deg,y .square Los niños cancelaron con un -30deg inclinación.
ambiente skew() En un elemento principal ayuda a reorganizar los elementos secundarios más allá de lo que permite la geometría rectangular típica. Cualquier cambio en el padre puede ser complementado, compensado o cancelado por el hijo, según el efecto que desee.
A continuación se muestra un ejemplo de escalado. por favor tenga en cuenta cómo <main> elemental skewY() es negada por sus hijos y scale()Diferentes valores para s para compensarlo ligeramente.
/* Applied on <main> (the parent element) */
.animate {
transform: rotate(-180deg) scale(.5) skewY(45deg) ;
transition: .6s .2s;
transition-property: transform, border-radius;
.squares {
transform: skewY(-45deg) scaleX(1.5);
border-radius: 10px;
transition: inherit;
}
}elemento padre (<main>) rotación en sentido antihorario (rotate(-180deg)), reducir (scale(.5)), e inclinado verticalmente (skewY(45deg)). dos hijos (.square) elimina la distorsión del padre mediante el uso de un valor negativo para el ángulo de inclinación del padre (skewY(-45deg)), y amplíe horizontalmente (scaleX(1.5)) cambia de un cuadrado a una barra horizontal.
Puedes encontrar muchas combinaciones de este tipo. He realizado algunas manipulaciones más a continuación, en lugar de usar la interactividad de JavaScript para activar la animación, he usado <details> Activar animación cuando se ubica el elemento. (open) declarar una vez <summary> Haga clic en el elemento. y cada uno <summary> contiene un .icon Cuando al niño se le muestran diferentes animaciones. <details> Alternar entre encendido y apagado.
haga clic en uno <details> Actívalo y apágalo para ver la animación en acción.
Eso es todo lo que quiero compartir: si pensamos en cómo la transformación de un elemento principal afecta esencialmente el tamaño, la posición y la orientación, es fácil olvidar que obtenemos algo de poder para escribir animaciones eficientes. Por ejemplo, esto elimina la necesidad de escribir animaciones complejas para cada elemento secundario individual, sino que aprovecha lo que el elemento principal puede hacer y luego ajusta el comportamiento del nivel secundario según sea necesario.
