Transiciones de vista

Las transiciones de vista proporcionan transiciones animadas cuando el DOM cambia, reduciendo el impacto visual y manteniendo el contexto espacial durante la navegación o las actualizaciones de contenido. webforJ se integra con la API de Transición de Vista del navegador para manejar la complejidad de coordinar animaciones entre los estados antiguo y nuevo.

Preview feature

This feature is in preview. Its API may still change in future releases.

Utiliza Page.getCurrent().startViewTransition() para crear una transición, que devuelve un constructor para configurar la transición:

Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    container.remove(oldView);
    container.add(newView);
    done.run();
  })
  .start();

El proceso de transición captura una instantánea del estado actual, aplica tus cambios en el DOM en el callback onUpdate, y luego anima desde la instantánea antigua hasta el nuevo contenido. Debes llamar a done.run() para señalar cuando tus cambios están completos.

El callback onUpdate es obligatorio

Llamar a start() sin establecer un callback de actualización lanza una IllegalStateException.

Aplicando transiciones

webforJ proporciona tipos de transición predefinidos que puedes aplicar a los componentes que entran o salen del DOM:

Constante	Efecto
`ViewTransition.NONE`	Sin animación
`ViewTransition.FADE`	Desvanecimiento entre el contenido antiguo y el nuevo
`ViewTransition.SLIDE_LEFT`	El contenido se desplaza hacia la izquierda (como navegación hacia adelante)
`ViewTransition.SLIDE_RIGHT`	El contenido se desplaza hacia la derecha (como navegación hacia atrás)
`ViewTransition.SLIDE_UP`	El contenido se desplaza hacia arriba
`ViewTransition.SLIDE_DOWN`	El contenido se desplaza hacia abajo
`ViewTransition.ZOOM`	El contenido antiguo se encoge, el nuevo contenido crece
`ViewTransition.ZOOM_OUT`	El contenido antiguo crece, el nuevo contenido se encoge

Utiliza enter() para animar un componente al ser añadido y exit() para animar un componente al ser eliminado:

// Animar un componente al entrar en el DOM
Page.getCurrent().startViewTransition()
  .enter(chatPanel, ViewTransition.ZOOM)
  .onUpdate(done -> {
    container.add(chatPanel);
    done.run();
  })
  .start();

// Animar un componente al salir del DOM
Page.getCurrent().startViewTransition()
  .exit(chatPanel, ViewTransition.FADE)
  .onUpdate(done -> {
    container.remove(chatPanel);
    done.run();
  })
  .start();

Transiciones de componentes compartidos

Las transiciones de componentes compartidos crean un efecto de transformación donde un componente parece transformarse de su posición en la vista antigua a su posición en la nueva vista. Esto se logra asignando el mismo nombre de transición a los componentes utilizando el método setViewTransitionName(), disponible en cualquier componente que implemente la interfaz HasStyle.

// En la vista de tarjeta
image.setViewTransitionName("blog-image");

// En la vista de detalle - el mismo nombre crea la transformación
image.setViewTransitionName("blog-image");

Al transitar entre estas vistas, el navegador anima el componente entre posiciones, creando una experiencia visual conectada.

Usa nombres únicos

Al trabajar con listas o componentes repetidos, incluye un identificador único en el nombre de la transición. Cada componente requiere su propio nombre distinto para transformarse correctamente a su componente correspondiente en la nueva vista. Usar el mismo nombre para múltiples componentes visibles causa un comportamiento indefinido.

Reordenamiento de listas

Un caso de uso común para las transiciones de componentes compartidos es animar los elementos de la lista cuando su orden cambia. Al asignar un view-transition-name único a cada elemento, el navegador anima automáticamente los componentes a sus nuevas posiciones:

// Cada tarjeta recibe un nombre de transición único basado en su ID
card.setViewTransitionName("card-" + item.id());

// Al mezclar, solo actualizar el DOM - el navegador maneja la animación
Page.getCurrent().startViewTransition()
  .onUpdate(done -> {
    renderList();
    done.run();
  })
  .start();

Animaciones CSS personalizadas

Para tener un control total sobre las animaciones, puedes definir keyframes CSS personalizados. webforJ agrega sufijos -enter o -exit a tus nombres de transición, que utilizas para dirigir a los pseudo-elementos de transición de vista:

/* Definir keyframes para componentes que entran */
@keyframes flip-enter {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0deg);
  }
}

/* Aplicar al pseudo-elemento de transición de vista */
::view-transition-new(flip-in-enter) {
  animation: flip-enter 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: top center;
}

::view-transition-old(flip-in-enter) {
  display: none;
}

Haz referencia a tu animación personalizada pasando su nombre (sin el sufijo) a enter() o exit():

// Usa "flip-in" - webforJ agrega el sufijo "-enter" automáticamente
Page.getCurrent().startViewTransition()
  .enter(notification, "flip-in")
  .onUpdate(done -> {
    stage.add(notification);
    done.run();
  })
  .start();

// Usa "blur-out" para salir - webforJ agrega el sufijo "-exit"
Page.getCurrent().startViewTransition()
  .exit(notification, "blur-out")
  .onUpdate(done -> {
    stage.remove(notification);
    done.run();
  })
  .start();

Personalización de CSS

Cada tipo de transición predefinido expone propiedades CSS personalizadas para ajustes finos:

Desvanecer

Variable	Predeterminado	Descripción
`--vt-fade-duration`	`200ms`	Duración de la animación
`--vt-fade-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Función de easing

Deslizar a la izquierda

Variable	Predeterminado	Descripción
`--vt-slide-left-duration`	`200ms`	Duración de la animación
`--vt-slide-left-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Función de easing
`--vt-slide-left-distance`	`30%`	Distancia de deslizamiento

Deslizar a la derecha

Variable	Predeterminado	Descripción
`--vt-slide-right-duration`	`200ms`	Duración de la animación
`--vt-slide-right-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Función de easing
`--vt-slide-right-distance`	`30%`	Distancia de deslizamiento

Deslizar hacia arriba

Variable	Predeterminado	Descripción
`--vt-slide-up-duration`	`200ms`	Duración de la animación
`--vt-slide-up-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Función de easing
`--vt-slide-up-distance`	`30%`	Distancia de deslizamiento

Deslizar hacia abajo

Variable	Predeterminado	Descripción
`--vt-slide-down-duration`	`200ms`	Duración de la animación
`--vt-slide-down-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Función de easing
`--vt-slide-down-distance`	`30%`	Distancia de deslizamiento

Zoom

Variable	Predeterminado	Descripción
`--vt-zoom-duration`	`200ms`	Duración de la animación
`--vt-zoom-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Función de easing
`--vt-zoom-scale`	`0.8`	Factor de escala (el antiguo se aleja a esto, el nuevo se acerca desde esto)

Zoom hacia afuera

Variable	Predeterminado	Descripción
`--vt-zoom-out-duration`	`200ms`	Duración de la animación
`--vt-zoom-out-easing`	`cubic-bezier(0.4, 0, 0.2, 1)`	Función de easing
`--vt-zoom-out-scale`	`1.2`	Factor de escala (el antiguo se acerca a esto, el nuevo se aleja de esto)

Sustitución de variables

Para personalizar, sustituye estas variables en tu CSS:

:root {
  --vt-fade-duration: 300ms;
  --vt-slide-left-distance: 50%;
}

Para una personalización avanzada, dirígete a los pseudo-elementos de transición de vista directamente:

::view-transition-old(vt-slide-left-exit) {
  animation-duration: 400ms;
}

::view-transition-new(vt-slide-left-enter) {
  animation-timing-function: ease-out;
}

Sigue aprendiendo

ArtículoAnimated Transitions, No JavaScript Required

Aplicando transiciones​

Transiciones de componentes compartidos​

Reordenamiento de listas​

Animaciones CSS personalizadas​

Personalización de CSS​