/* ========================================================================== FUNDACIÓN PUNTO 37 — transición entre vistas -------------------------------------------------------------------------- El encargo del cliente: "en nosotros, añade una animación de transición, lo mismo para contacto y eventos, ya que están en otra vista". Son cinco páginas HTML separadas, así que cada clic RECARGA el documento. El efecto no puede ser una sola animación: hay que partirlo en dos mitades que se encadenen a través de la recarga. · MITAD DE SALIDA la pone transiciones.js al pulsar un enlace interno. · MITAD DE ENTRADA la pone esta hoja, sola, sin ayuda de JavaScript. EL GESTO -------- No es un fundido. El sitio entero está construido con festones de nube: cada sección se separa de la siguiente con ese borde lobulado. Así que la transición es un BANCO DE NUBES que sube: entra por abajo y tapa la vista que se va; en la vista nueva ese mismo banco sigue subiendo y su canto inferior, también lobulado, la va destapando. Un solo movimiento continuo hacia arriba, partido por la recarga. El festón es literalmente el mismo trazo que dibuja los separadores de sección, con las mismas tres pasadas desfasadas. POR QUÉ LA ENTRADA NO PUEDE DEPENDER DE JAVASCRIPT -------------------------------------------------- Este patrón es famoso por dejar páginas en blanco: basta que el script no llegue para que la cortina se quede puesta y el visitante mire una pantalla de color. Aquí eso no puede pasar, por construcción: 1. La cortina es un pseudo-elemento del . Nadie tiene que crearla. 2. Su estado de REPOSO, el que vale si ninguna animación llega a correr, es FUERA DE LA PANTALLA. El estado que tapa sólo existe DENTRO de los @keyframes, es decir sólo mientras la animación avanza. 3. Se revela con @keyframes de una pasada y fill:forwards, nunca con transiciones, por lo mismo que explica animaciones.css: una transición se reinicia en cada recálculo de estilo, se queda colgada en su fase de retardo fijando el valor inicial y en la cascada gana incluso a !important. Una animación de una pasada termina y no se puede reiniciar sola. 4. Cero animation-delay. El retardo es justo la trampa del punto anterior. 5. pointer-events:none siempre: aunque algo saliera mal, la página se seguiría pudiendo usar por debajo. La salida sí usa JavaScript, y ahí es inofensivo: si el script falla, el enlace navega como cualquier enlace y no se pierde nada. Sólo se animan transform y opacity, como en el resto del sitio. ========================================================================== */ /* --- 1. MEDIDAS Y COLOR --------------------------------------------------- Un solo sitio donde tocar. El color va aparte de las máscaras a propósito: las máscaras son siluetas blancas y no llevan color dentro, así que cambiar --p37-cortina cambia la cortina entera sin tener que editar los data-URI. */ :root{ /* El azul del cielo del sitio, el mismo de la banda de territorio. Es el color sobre el que las nubes de esta marca siempre se leen. */ --p37-cortina:var(--azul,#00ACF9); /* Alto del festón. 62px es el mismo canto que .nube usa entre secciones. */ --p37-cresta:62px; /* Holgura por arriba y por abajo. Va en vh y no en px por el navegador de móvil: cuando la barra de direcciones se esconde, la ventana crece de golpe unos 80px y una cortina justa dejaría ver una franja de página por el canto. Con 12vh de sobra a cada lado eso no ocurre. */ --p37-fuera:12vh; /* La entrada dura más que la salida a propósito: al salir uno ya decidió y quiere llegar, al entrar conviene que la vista se asiente. Con la curva de abajo, 0.56s se perciben como media: a mitad de tiempo ya destapó el 85%. */ --p37-t-entra:.56s; --p37-t-sale:.26s; /* Curvas. La de entrada es la misma que animaciones.css usa para revelar el contenido, para que las dos capas de movimiento hablen igual. La de salida arranca rápida y se asienta al final. El primer intento fue una curva que aceleraba hasta el final, y medida resultó mala: a los 245 de sus 260 ms todavía le faltaba una cuarta parte del recorrido, o sea que se comía el último tramo de golpe y el remate se leía como un salto. Con ésta, a mitad de tiempo la pantalla ya está prácticamente tapada y lo que queda es el último dedo de cortina asentándose, que no se nota. */ --p37-curva-entra:cubic-bezier(.22,.68,0,1); --p37-curva-sale:cubic-bezier(.34,.72,.36,1); /* --- las dos crestas --------------------------------------------------- Es el trazo #festón de las páginas, con sus mismas tres pasadas: la base más dos copias escaladas y corridas. La unión de las tres no tiene periodo y por eso el canto se lee irregular en vez de repetido, que es justo el criterio del separador de secciones. Las dos pasadas extra van con . Si un navegador no resolviera esa referencia dentro de una imagen, se dibuja igual la pasada base y queda un festón de una sola capa: más simple, nunca roto. */ --p37-cresta-arriba:url("data:image/svg+xml;utf8,"); /* La misma silueta volteada. El banco de nubes tiene que ir lobulado por sus DOS cantos: sube tapando con el de arriba y se va destapando con el de abajo. Si el canto inferior fuese recto, la mitad de entrada se leería como un barrido cualquiera y no como una nube. */ --p37-cresta-abajo:url("data:image/svg+xml;utf8,"); } /* --- 2. EL BANCO DE NUBES ------------------------------------------------- Son DOS piezas, no una: ::before es la de entrada y ::after la de salida. Podrían ser la misma cambiándole la animación con una clase, y ese fue el primer intento, pero tiene un defecto real: al quitar la clase (por ejemplo al volver atrás desde la caché del navegador) el nombre de la animación cambia otra vez, el motor la trata como una animación NUEVA y la vuelve a correr desde cero. La página restaurada aparecería tapada. Con dos piezas independientes eso no puede ocurrir: la de entrada ya terminó y se queda quieta fuera de pantalla, y la de salida sencillamente deja de existir. La caja mide más que la ventana por arriba y por abajo (--p37-fuera a cada lado) para que las crestas queden escondidas fuera del encuadre cuando la cortina está tapando, y para que el crecimiento de la ventana en el móvil no destape una franja por el canto. */ body::before, body::after{ content:""; position:fixed; left:0; right:0; top:calc(-1 * var(--p37-fuera)); height:calc(100% + var(--p37-fuera) * 2); z-index:200; /* por encima de todo: nav 60, saltar 100 */ pointer-events:none; /* la página se sigue pudiendo usar debajo */ /* El color plano de la marca ya venía sintiéndose plano, y una cortina a pantalla completa es la superficie donde más se nota. Lleva el mismo grano que los fondos del arte, con la misma mezcla, para que sea la misma materia y no un rectángulo de color. */ background-color:var(--p37-cortina); background-image:var(--grano); background-blend-mode:overlay; /* Tres capas de máscara: cresta arriba, macizo en medio, cresta abajo. Se suman (es el compuesto por defecto), así que lo que se ve es la unión. El macizo se solapa 2px con cada cresta: sin ese solape aparece una costura de un píxel donde la silueta apoya su base. */ -webkit-mask-image:var(--p37-cresta-arriba), linear-gradient(#000,#000), var(--p37-cresta-abajo); mask-image:var(--p37-cresta-arriba), linear-gradient(#000,#000), var(--p37-cresta-abajo); -webkit-mask-size:100% var(--p37-cresta), 100% calc(100% - var(--p37-cresta) * 2 + 4px), 100% var(--p37-cresta); mask-size:100% var(--p37-cresta), 100% calc(100% - var(--p37-cresta) * 2 + 4px), 100% var(--p37-cresta); -webkit-mask-position:center top, center calc(var(--p37-cresta) - 2px), center bottom; mask-position:center top, center calc(var(--p37-cresta) - 2px), center bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } /* --- 2.1 MITAD DE ENTRADA (CSS puro) ------------------------------------ REPOSO: arriba, fuera de la pantalla. Es el estado que vale si la animación no llega a correr nunca, y por eso es el estado en el que la página se ve entera. El estado que tapa sólo vive dentro de @keyframes. Termina en ese mismo reposo con fill:forwards, así que al acabar queda clavada y no puede volver sola. */ body::before{ transform:translate3d(0,-100%,0); animation:p37-cortina-fuera var(--p37-t-entra) var(--p37-curva-entra) forwards; } @keyframes p37-cortina-fuera{ from{ transform:translate3d(0,0,0) } /* tapando, heredado de la vista anterior */ to { transform:translate3d(0,-100%,0) } /* fuera por arriba: la vista queda limpia */ } /* --- 2.2 MITAD DE SALIDA (la dispara el script) -------------------------- No existe hasta que hace falta: con content:none el navegador ni siquiera crea la caja, así que en reposo no hay una segunda capa a pantalla completa ocupando memoria de composición. Al añadir la clase se crea y su animación arranca en ese mismo instante. El transform de reposo la deja POR DEBAJO del encuadre, no tapando: si la animación no corriera, la pieza aparecería igualmente invisible. */ body::after{ content:none; transform:translate3d(0,100%,0); z-index:201 } html.p37-saliendo body::after{ content:""; animation:p37-cortina-cubre var(--p37-t-sale) var(--p37-curva-sale) forwards; } @keyframes p37-cortina-cubre{ from{ transform:translate3d(0,100%,0) } /* esperando abajo, fuera del encuadre */ to { transform:translate3d(0,0,0) } /* tapando: aquí es cuando se navega */ } /* --- 3. API DE TRANSICIONES DE VISTA ------------------------------------- RETIRADA. Aquí estaba `@view-transition{ navigation:auto }` para coser el cambio de documento sin parpadeo blanco. Medido en la integración, dejaba la página TAPADA: en una transición de vista entre documentos el navegador SUSPENDE el renderizado del documento nuevo mientras prepara la transición. Con el renderizado suspendido las animaciones no avanzan, que es el mismo síntoma que animaciones.js documenta para la pestaña oculta: currentTime clavado en 0 y playState 'running'. Y la cortina de entrada de §2.1 arranca TAPANDO —ese es su primer fotograma—, así que se quedaba en él para siempre. El reposo fuera de pantalla, que es toda la garantía de esta hoja, no llegaba nunca porque la animación no llegaba a correr. Medido con un clic de verdad, index → nosotros, en headless-shell y en el Chrome del sistema: con @view-transition rAF = 0 fotogramas · anim running t=0 · translateY(0) TAPADA sin @view-transition rAF = 160 · anim finished 560ms · -1116px fuera carga directa por URL rAF = 163 · anim finished 560ms · -1116px fuera Sólo se manifestaba al pulsar un enlace, que es justo para lo que existe esta hoja; cargando la página por su URL todo salía bien y el fallo no se veía en ninguna otra medida. Lo que se pierde retirándola es únicamente la costura contra el parpadeo blanco, que el propio comentario original describía como lo accesorio: el GESTO nunca vivió aquí y por eso sigue siendo exactamente el mismo en todos los navegadores. Lo que se gana es que la promesa del §2.1 vuelve a ser cierta: si algo falla, la cortina está fuera de pantalla y la página se ve. Si algún día se quiere recuperar, tiene que venir con la mitad de entrada rehecha para que su estado de reposo sea el de TAPAR y no el de destapar; o sea, es un rediseño de la hoja, no un que se vuelve a poner. */ /* Se dejan nombradas las dos pseudo-clases: si un navegador iniciara una transición de vista por su cuenta, se resuelve en un corte y no en un fundido largo. Sin la regla @view-transition de arriba esto no activa nada por sí solo. */ ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.12s; animation-timing-function:linear; } /* --- 4. MOVIMIENTO REDUCIDO ---------------------------------------------- Quien lo pide navega y punto: no hay cortina, no hay espera y el enlace se comporta como cualquier enlace. El script comprueba esta misma preferencia antes de interceptar nada, así que aquí sólo hay que asegurar que ninguna pieza pueda quedarse tapando. Ojo con el orden de esta comprobación: lo que se fuerza es el estado VISIBLE. Ninguna regla de este archivo esconde nada de forma permanente. */ @media (prefers-reduced-motion:reduce){ body::before{ animation:none !important; transform:translate3d(0,-100%,0) !important; /* fuera de pantalla */ } body::after, html.p37-saliendo body::after{ content:none !important; /* ni se crea */ animation:none !important; } /* Sin animaciones en los pseudo-elementos, la transición de vista termina en el primer fotograma: el cambio de página es un corte limpio. */ ::view-transition-old(root), ::view-transition-new(root){ animation:none !important } } /* --- 5. IMPRESIÓN --------------------------------------------------------- Una capa fija a pantalla completa es justo el tipo de pieza que algunos motores repiten en cada hoja impresa. Está fuera del encuadre y no debería salir, pero retirarla del papel no cuesta nada y evita la sorpresa. */ @media print{ body::before, body::after{ display:none !important } }