Traducir Y() | Consejos CSS

CSS translateY() La función mueve un elemento verticalmente en una cantidad específica. En concreto, mueve el elemento hacia arriba o hacia abajo dependiendo de si el valor es positivo o negativo.

.parent:hover .box {
  transform: translateY(50%); /* Shift down by half the element's height */
}

Junto con otras funciones de transformación, se utiliza internamente. transform propiedad.

se define en Módulo de transformación CSS Nivel 1 borrador.

sintaxis

este translateY() La sintaxis de la función es la siguiente:

<translateY()> = translateY( <length-percentage> )

Sólo una forma elegante de decir: Traduce (o mueve) el elemento verticalmente hasta este punto.

argumento

/* <length> */
translateY(80px) /* Element moves 80px down*/
translateY(-24ch) /* Element moves 24ch up */

/* <percentage> */
translateY(50%) /* Element moves 50% of the element's height downward */
translateY(-100%) /* Element moves 100% of the element's height upward */

este translateX() La función requiere un <length-percentage> Los parámetros especifican la distancia y dirección en la que se mueve el elemento, que puede ser hacia arriba (negativo) o hacia abajo (positivo).

puede tomar cualquiera <length> o un <percentage> debate:

• <length>: Cuando es positivo, p.e. 20pxque empuja el elemento hacia abajo 20 píxeles, mientras que los valores negativos como -20px Empujará el elemento hacia arriba 20 píxeles.
• <percentage>: El porcentaje es relativo a la altura del elemento, por lo que translateY(40%) Empuje el elemento sobre un elemento de 100 px de alto 40px baja al mismo tiempo translateY(-40%) Elementos promocionales 40px arriba.

Uso básico

este translate Las funciones son excelentes para animaciones simples porque no interfieren con el flujo de archivos. Específicamente, translateY() Las funciones son excelentes para animaciones “pop” o “fade” donde los elementos pueden deslizarse desde abajo. Tomemos como ejemplo el componente de la tarjeta (llamémoslo .stat-card) se desliza hacia arriba cuando el usuario hace clic en un botón o se desplaza hacia abajo.

Estos componentes se mueven inicialmente hacia abajo 50 píxeles y se marcan con opacity valor 0.

.stat-card {
  /* ... */
  opacity: 0;
  transform: translateY(50px);

  transition:
    opacity 0.8s ease-in,
    transform 0.8s ease-in,
    box-shadow 0.3s ease;
}

Luego, cuando otro elemento (llamémoslo .dashboard) se convierte .activeeste .stat-card El elemento se vuelve completamente visible y pasa a su posición original en la página.

.dashboard.active .stat-card {
  opacity: 1;
  transform: translateY(0);
}

Incluso podemos agregar una “microanimación” cada vez que el usuario pasa el cursor sobre cualquiera de los dos. .stat-card muévelo ligeramente hacia arriba 8pxdebido al uso de valores negativos:

.dashboard.active .stat-card:hover {
  transform: translateY(-8px);
}

Centrarse en la animación del campo del formulario

Los campos de formulario suelen utilizar un borde azul para indicar el foco, pero pueden ser más interesantes. En una biblioteca de UI, p. interfaz de usuario múltipleeste campo de texto La etiqueta del componente inicialmente sirve como marcador de posición, pero cuando el usuario se enfoca en el campo, se mueve hacia la parte superior y toma la posición de la etiqueta.

Podemos lograr animaciones similares a través de aplicaciones. translateY() funcionar para input y label elemento.

Primero, lo haremos label elementos dentro input Elementos utilizados como marcadores de posición absolute posición.

label {
  position: absolute;
  left: 15px;
  top: 15px;

  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

Luego, cuando el usuario se centra en input campo, label Traducido 32px Se puede utilizar como etiqueta como máximo.

input:focus ~ label,
input:not(:placeholder-shown) ~ label {
  transform: translateY(-32px) scale(0.8);
  color: #6200ee;
  font-weight: bold;
}

este labelLa posición de se restablece cuando el usuario pierde el foco input elemento.

No afecta a otros elementos

este translateY() Función, igual que otros. transform funciona y no afecta el flujo de archivos. En cambio, mueve visualmente el elemento trasladado a su nueva posición sin empujar los elementos circundantes o los elementos a su nueva posición. Además, el espacio que ocupaba originalmente el elemento permanece en el diseño, como si no se hubiera movido en absoluto.

/* Translated element */
.translated {
  position: absolute;
  top: 0;
  left: 0;

  transform: translateY(40px);
}

Tenga en cuenta que mover el elemento “Traducido” no afecta la ubicación de otros elementos a su alrededor.

a diferencia de margin Puede provocar reflujo o mover elementos adyacentes, translateY() Sólo se cambia la posición del elemento de presentación visual.

Problema con pseudoclases de puntero

usar translateY() directamente en la pseudoclase del puntero, p. :hover A veces rompe la interacción. En el caso de que el elemento se traslade lejos del cursor, :hover Se pierde el estado, lo que hace que el elemento se restablezca inmediatamente a su posición original. En la posición inicial, el cursor está allí, por lo que se traslada nuevamente, provocando un ciclo de parpadeo continuo.

Una solución simple es colocar el elemento a traducir en un contenedor principal y aplicar una pseudoclase (:hover) al elemento padre, mientras que el elemento principal usa la función de traducción.

/* Problem case */
.bad:hover {
  transform: translateY(160px);
}

/* Solution */
.parent:hover .good {
  transform: translateY(160px);
}

demostración

Especificación

CSS translateY() La función está definida en Módulo de transformación CSS Nivel 1actualmente en borrador editorial.

Soporte del navegador

este translateY() Las funciones tienen soporte básico en todos los navegadores modernos.

Importante