Las transiciones de visualización son realmente interesantes. No sólo eso, también empezaron a aparecer. en todos lados. Creo que tú, como yo, encuentras muchas cosas en la naturaleza que te conmueven. Guau y desea utilizarlos inmediatamente en su propio sitio web o proyecto.
Al mismo tiempo, las transiciones de visualización pueden resultar difíciles de “captar” al principio. pueden ser simplesClaro, pero con la excepción de los fundidos cruzados, la mayoría de las cosas involucran múltiples partes móviles.
Tiendo a encontrar que la mejor manera de aprender cosas nuevas es mirar el código, usarlo yo mismo y luego desarrollarlo. Por lo tanto, recopilé siete métodos de transformación de vistas para este propósito. Cubriremos la configuración básica, demostraremos recetas y luego te dejaremos sentir libre de experimentar.
Está perfectamente bien ir abajo y copiar tu favorito, pero si quieres saber de qué se tratan las transformaciones de vista, te recomiendo leer Primero una introducción rápida. Antes de pasar a la receta.
Ah, y antes de comenzar, vale la pena señalar que las transiciones de vista son de hecho básicas y compatibles con todos los principales navegadores al momento de escribir este artículo. Pero algunos tipos de animaciones pueden o no ser compatibles con navegadores específicos, así que, como siempre, preste mucha atención y pruebe.
configuración
Para cada transición de vista, debemos realizar algunas configuraciones por adelantado. Primero, necesitamos Optar por para que lo usen @view-transition en las reglas dos paginas — La página en la que estamos y la página a la que queremos pasar. Si está utilizando plantillas en su sitio, esto puede aparecer en la plantilla de encabezado para que se aplique globalmente en todas partes.
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: <transition-type>;
}
}Eso <transition-type> Esta es la única parte que no se puede copiar y pegar directamente. Este es un marcador de posición types descriptor, Lo hemos cubierto en detalle antes.. Es más sutil que eso, pero types Básicamente el nombre de la animación que asignamos a una transición específica. De esta manera, si trabajamos con múltiples transformaciones, podemos dejar claro qué transformaciones están activas para evitar que entren en conflicto entre sí. Pero lea el artículo vinculado para obtener más información al respecto.
Note como tenemos @view-transition Hay una pared detrás prefers-reduced-motion: no-preference Consultas de los medios. No todo el mundo quiere moverse por su página, esta es una preferencia que se puede establecer a nivel del sistema operativo, por lo que la respetaremos de esta manera si es necesario.
Finalmente, aplicaremos nuestra animación así:
html:active-view-transition-type(<transition-type>)::view-transition-old(root) {
animation: a-cool-outgoing-animation 1.4s ease forwards;
}
html:active-view-transition-type(<transition-type>)::view-transition-new(root) {
animation: a-cool-incoming-animation 1.4s ease forwards;
}……dónde :active-view-transtion-type() Transformación de pseudocoincidencia type definimos en @view-transition regla. Por ejemplo, si llamamos a una animación que nombramos bouncey luego lo usamos en la regla at de la siguiente manera:
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: <transition-type>;
}
}…y pseudo así:
/* The "current" page */
html:active-view-transition-type(bounce)::view-transition-old(root) {
animation: bounce-in 1.4s ease forwards;
}
/* The page we're transitioning to */
html:active-view-transition-type(bounce)::view-transition-new(root) {
animation: bounce-in 1.4s ease forwards;
}Bien, ya es suficiente, comencemos con la receta. Nuevamente, siéntase libre de utilizar cualquiera de estos en sus propios experimentos o proyectos.
pixelar disolver
Esto es un poco como un simple fundido cruzado, pero difuminando el contenido a medida que el contenido de la página anterior se desvanece y el contenido de la página nueva aparece.
clip completo
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: pixelate-dissolve;
}
}
html:active-view-transition-type(pixelate-dissolve)::view-transition-old(root) {
animation: pixelate-out 1.4s ease forwards;
}
html:active-view-transition-type(pixelate-dissolve)::view-transition-new(root) {
animation: pixelate-in 1.4s ease forwards;
}
@keyframes pixelate-out {
0% {
filter: blur(0px);
opacity: 1;
}
100% {
filter: blur(40px);
opacity: 0;
}
}
@keyframes pixelate-in {
0% {
filter: blur(40px);
opacity: 0;
}
100% {
filter: blur(0px);
opacity: 1;
}
}limpiar
Aquí estamos usando clip-path Atributo para lograr el efecto de “borrado”, deslizamos el contenido de la nueva página hacia arriba desde la parte inferior para reemplazar el contenido “antiguo”.
El proceso es simple: para la página saliente, pasamos de su valor predeterminado a inset() valor 0 0 0 0 (Cree un rectángulo en los bordes superior, derecho, inferior e izquierdo de la página) y cambie abajo valor 100%. Es decir, la página proviene de arriba llegar abajo.
Página entrante de top existir 100% y cayó a 0.
clip completo
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: wipe-up;
}
}
html:active-view-transition-type(wipe-up)::view-transition-old(root) {
animation: wipe-out 1.4s ease forwards;
}
html:active-view-transition-type(wipe-up)::view-transition-new(root) {
animation: wipe-in 1.4s ease forwards;
}
@keyframes wipe-out {
from {
clip-path: inset(0 0 0 0);
}
to {
clip-path: inset(0 0 100% 0);
}
}
@keyframes wipe-in {
from {
clip-path: inset(100% 0 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}Podemos hacer que las cosas se borren fácilmente, se borren hacia abajo y se borren hacia la izquierda cambiando el valor insertado. Por ejemplo, esto es lo que se debe limpiar correctamente:
@keyframes wipe-out {
from {
clip-path: inset(0 0 0 0);
}
to {
clip-path: inset(0 0 0 100%);
}
}
@keyframes wipe-in {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}Limpiar hacia la derecha funciona de manera similar a limpiar, excepto que la página saliente comienza en el centro y corta hacia la derecha. Por eso el segundo valor proviene de 0 llegar 100%. Asimismo, la página entrante proviene de 100% de izquierda a derecha 0.
La limpieza se realiza de la misma manera:
@keyframes wipe-out {
from {
clip-path: inset(0 0 0 0);
}
to {
clip-path: inset(100% 0 0 0);
}
}
@keyframes wipe-in {
from {
clip-path: inset(0 0 100% 0);
}
to {
clip-path: inset(0 0 0 0);
}
}¡Lo entendiste!
Girar hacia adentro y hacia afuera
Este es un poco… raro. Definitivamente no es la cosa más práctica del mundo, pero muestra hasta dónde pueden llegar las transformaciones de vista.
usamos scale() y rotate() Funciones para escalar y rotar el contenido de la página, donde la página “antigua” se reduce a 0 y girar en el sentido de las agujas del reloj 180deg. A continuación, el contenido de la página “nueva” se expande a 1 y girar en sentido antihorario -180deg. un poco opacity Se introduce para dar la ilusión de que algo sale y vuelve a entrar.
clip completo
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: zoom-rotate;
}
}
html:active-view-transition-type(zoom-rotate)::view-transition-old(root) {
animation: zoom-rotate-out 1.4s ease forwards;
transform-origin: center;
}
html:active-view-transition-type(zoom-rotate)::view-transition-new(root) {
animation: zoom-rotate-in 1.4s ease forwards;
transform-origin: center;
}
@keyframes zoom-rotate-out {
to {
transform: scale(0) rotate(180deg);
opacity: 0;
}
}
@keyframes zoom-rotate-in {
from {
transform: scale(0) rotate(-180deg);
opacity: 0;
}
}eliminación del círculo
Este es mucho más sutil que el anterior. Si el contenido al que estábamos haciendo la transición fuera más exclusivo, podría ser más atractivo. Pero como verá en el vídeo a continuación, el “fondo” entre las páginas “antiguas” y “nuevas” comparte el mismo fondo, lo que hace que la transición sea más fluida.
El círculo consta de clip-patHora Propiedades, dibuja la forma desde el centro usando circle() Función, de 0% (sin tamaño) a 150% (el tamaño excede el contenido), lo que hace que encapsule toda la página.
clip completo
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: circular-wipe;
}
}
html:active-view-transition-type(circular-wipe)::view-transition-old(root) {
animation: circle-wipe-out 1.4s ease forwards;
}
html:active-view-transition-type(circular-wipe)::view-transition-new(root) {
animation: circle-wipe-in 1.4s ease forwards;
}
@keyframes circle-wipe-out {
to {
clip-path: circle(0% at 50% 50%);
}
}
@keyframes circle-wipe-in {
from {
clip-path: circle(0% at 50% 50%);
}
to {
clip-path: circle(150% at 50% 50%);
}
}Empuje inclinado
Esto empuja la página “antigua” y la página “nueva” desde la esquina inferior derecha de la pantalla a la esquina superior derecha o, de hecho, ajustando el valor, a cualquier esquina que queramos.
Para la esquina inferior derecha, configuré la animación para traducir a -100% En los ejes X e Y, aléjelo de la pantalla. Luego se mueve diagonalmente a su posición preestablecida. 0%. un poco opacity Ayude a que todo funcione sin problemas.
clip completo
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: diagonal-push;
}
}
html:active-view-transition-type(diagonal-push)::view-transition-old(root) {
animation: diagonal-out 1.4s ease forwards;
}
html:active-view-transition-type(diagonal-push)::view-transition-new(root) {
animation: diagonal-in 1.4s ease forwards;
}
@keyframes diagonal-out {
to {
transform: translate(-100%, -100%);
opacity: 0;
}
}
@keyframes diagonal-in {
from {
transform: translate(100%, 100%);
opacity: 0;
}
}telón levantado
Es como una cortina que se cierra en la página “antigua” y se abre en la página “nueva”. este es otro lugar inset() La funcionalidad entra en juego. Definimos un rectángulo con 50% a izquierda y derecha. Cuando la página sale, este valor aumenta al 50%, y cuando la página entra, este valor disminuye a 0, haciendo que la imagen aparezca desde el centro hacia la izquierda y hacia la derecha, ¡como una cortina!
clip completo
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: curtain;
}
}
html:active-view-transition-type(curtain)::view-transition-old(root) {
animation: curtain-out 1.4s ease forwards;
}
html:active-view-transition-type(curtain)::view-transition-new(root) {
animation: curtain-in 1.4s ease forwards;
}
@keyframes curtain-out {
from {
clip-path: inset(0 0 0 0);
}
}
@keyframes curtain-in {
from {
clip-path: inset(0 50% 0 50%);
}
to {
clip-path: inset(0 0 0 0);
}
}giro 3D
Fingimos ser una tarjeta de dos caras en la que una página se “despliega” y la siguiente se muestra a lo largo del eje Z.
clip completo
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
types: flip-3d;
}
}
html:active-view-transition-type(flip-3d)::view-transition-old(root) {
animation: flip-out 1.4s ease forwards;
}
html:active-view-transition-type(flip-3d)::view-transition-new(root) {
animation: flip-in 1.4s ease forwards;
}
@keyframes flip-out {
0% {
transform: rotateY(0deg) translateX(0vw);
}
100% {
transform: rotateY(-90deg) translateX(-100vw);
opacity: 1;
}
}
@keyframes flip-in {
0% {
transform: rotateY(90deg) translateX(100vw);
}
100% {
transform: rotateY(0deg) translateX(0vw);
}
}¿Alguna receta interesante que te gustaría compartir?
Puedo como ¡Vea más ejemplos e ideas si están disponibles! Brahms (o Brandy, como yo lo llamo) se toma el tiempo Crea un montón de ejemplos de transición de vistas En una presentación interactiva que definitivamente vale la pena ver.
