/* ========================================================================== FUNDACIÓN PUNTO 37 — apertura suave de los paneles "Ver más" -------------------------------------------------------------------------- El cliente lo dijo así: "para las tarjetas con texto se debe de añadir una animación suave de apertura para los cuadros de texto ya que actualmente abren de manera abrupta". Son los
del tablero de "Qué hacemos" en Inicio. Hoy dan un salto porque el navegador no maqueta el contenido de un
cerrado: al poner el atributo open aparece de una vez, con su altura entera, y no hay transición posible entre "no existe" y "mide 96px". POR QUÉ SE MIDE CON JAVASCRIPT Y NO CON LA REJILLA 0fr → 1fr -------------------------------------------------------------------------- Las dos técnicas que de verdad funcionan son la rejilla (un envoltorio interno que va de grid-template-rows:0fr a 1fr) y medir la altura y animarla. Aquí se eligió medir, por tres razones concretas de ESTE sitio: 1. La rejilla necesita un DIV ENVOLTORIO dentro del
, y el encargo es no tocar el HTML. Ese envoltorio habría que inyectarlo con JavaScript, así que el "camino sin script" que parecía tener la rejilla no existe. 2. Ese envoltorio rompería selectores que ya están escritos y aprobados: animaciones.css usa `.detalle[open] > ul` y `.detalle[open] li`, y estilo.css usa `.detalle ul`. Meter un div en medio mata el `>` y deja la lista sin su entrada escalonada. Medir no mueve un solo nodo. 3. El cierre hay que animarlo, y ninguna de las dos técnicas puede hacerlo sola: el navegador retira el atributo open en el acto. Retenerlo exige JavaScript de todas formas. Puestos a depender del script para cerrar, no tiene sentido pagar además el precio de reestructurar el DOM. Lo que se mide es la altura del PROPIO
, no la de la lista. Así el margen superior de la lista viaja dentro de la medida y no hay ningún salto de 12px al final del recorrido. QUÉ PASA SI EL SCRIPT NO LLEGA -------------------------------------------------------------------------- El
es nativo: sigue abriendo y cerrando con el ratón y con el teclado, sin animación. Nada de lo que hay aquí lo esconde. Además, si el navegador entiende ::details-content (Chrome y Safari recientes), el bloque del final le da la apertura suave igual, sin una línea de script. Ese bloque se apaga solo en cuanto aperturas.js arranca, para que las dos capas no animen la misma altura a la vez. NADA QUEDA EN ALTURA CERO NI OCULTO -------------------------------------------------------------------------- En reposo esta hoja no toca la altura del panel: ni abierto ni cerrado. El recorte y la altura sólo existen mientras dura la animación, y los pone y los quita el script. Un panel cerrado es un
cerrado normal y corriente, así que el buscador del navegador lo sigue encontrando y lo abre solo, y el lector de pantalla lo sigue anunciando como lo que es. Va DESPUÉS de todas las demás hojas: necesita ganarle por orden a las reglas de animaciones.css que también pintan la lista y el signo. ========================================================================== */ :root{ /* Abrir un poco más largo que cerrar. Al abrir la persona está esperando a leer y el recorrido acompaña; al cerrar ya decidió y lo que quiere es que se quite de en medio. */ --apertura-dur:340ms; --apertura-dur-cierre:260ms; /* La misma curva del resto del sitio (animaciones.css). Arranca decidida y frena largo: es lo que hace que se lea como que el panel se acomoda en vez de detenerse en seco. */ --apertura-curva:cubic-bezier(.22,.68,0,1); } /* El script escribe alturas en píxeles. Con border-box esa cifra es la caja entera y la medida coincide con offsetHeight, que es lo que él lee. La hoja base ya pone border-box a todo; esto lo deja explícito para que un cambio futuro en el reset no descuadre la medición sin avisar. */ details{box-sizing:border-box} /* --- 1. EL ESTADO "EN MOVIMIENTO" --------------------------------------- Sólo vive durante la animación. overflow:hidden es lo que recorta la lista mientras la caja crece o mengua; sin él la lista asomaría fuera del panel. OJO al orden, que aquí hubo un defecto medido: esta clase se pone DESPUÉS de tomar las medidas, nunca antes. overflow:hidden crea un contexto de formato y encierra márgenes que en reposo se escapan de la caja (el de 5px del último
  • del tablero). Midiendo con la clase ya puesta, el destino salía 5px por encima de la altura de reposo y el panel daba un respingo justo al terminar de abrir. El detalle está en aperturas.js. */ details.animando{ overflow:hidden; /* height no crea contexto de apilamiento, así que este aviso no altera el orden de pintado de la tarjeta ni sus sombras sólidas. */ will-change:height; } /* --- 2. AL CERRAR, EL CONTENIDO SE DILUYE -------------------------------- La caja mengua y la lista se apaga con ella. Sin esto el texto se ve nítido hasta el último píxel y el recorte se lee como una guillotina. No se baja a 0: a media transición el panel todavía mide bastante y un vacío ahí dentro canta más que el texto atenuado. OJO CON EL PESO DE LOS SELECTORES, que aquí ya falló una vez. animaciones.css deja corriendo `html.anim .detalle[open] > ul`, que pesa (0,3,2). El primer intento de esta regla se escribió con `details.cerrando > :not(summary)`: parece más específico de leer, pero `details` es una ETIQUETA y no una clase, así que pesaba (0,2,3) y perdía. La lista seguía a plena opacidad y el apagado no se veía, sin que nada avisara. Por eso van dos selectores y no uno: · el genérico, para cualquier
    que se añada mañana en otra página, donde no hay ninguna regla que disputar; · el del tablero, con .detalle y [open], que suma (0,4,2) y gana por peso propio sin depender de en qué orden se enlacen las hojas. */ details.cerrando > :not(summary){ animation:panel-se-apaga var(--apertura-dur-cierre) var(--apertura-curva) forwards; } html.anim .detalle.cerrando[open] > ul, .detalle.cerrando[open] > ul{ animation:panel-se-apaga var(--apertura-dur-cierre) var(--apertura-curva) forwards; } @keyframes panel-se-apaga{ from{opacity:1} to {opacity:.18} } /* --- 3. EL SIGNO DEL RESUMEN --------------------------------------------- Al ABRIR no se toca: animaciones.css ya trae `marca-abre`, que hace llegar el signo nuevo girando, y está aprobado. Lo que faltaba era el camino de vuelta, porque al cerrar no había nada. Gira y se apaga. El giro no es decorativo: el glifo cambia de "–" a "+" por contenido, y ese cambio es un corte seco que no se puede interpolar. Con el signo casi transparente en el momento del relevo, el cambio ocurre donde no se ve y lo que se percibe es un solo gesto continuo. */ .detalle.cerrando > summary::after, html.anim .detalle.cerrando > summary::after{ animation:marca-cierra var(--apertura-dur-cierre) var(--apertura-curva) forwards; } @keyframes marca-cierra{ from{opacity:1; transform:none} to {opacity:.15; transform:rotate(90deg) scale(.62)} } /* --- 4. SIN SCRIPT, SI EL NAVEGADOR SABE --------------------------------- ::details-content es la caja que el navegador arma alrededor de todo lo que no es el resumen. Donde existe, se puede animar su altura sin tocar el DOM, y con interpolate-size el valor auto se vuelve interpolable, que es lo que permite ir de 0 a la altura real sin medirla. Va colgado de html:not(.aperturas): esa clase la pone aperturas.js nada más arrancar. O sea que este bloque es exactamente la red para cuando el script NO está. Si estuviera y los dos animaran la altura, se pelearían. allow-discrete es imprescindible: content-visibility salta de hidden a visible sin valores intermedios, y sin esa palabra el navegador lo cambiaría al empezar a cerrar y el contenido desaparecería antes de que la caja terminara de menguar. */ @supports selector(::details-content){ html:not(.aperturas) details{ interpolate-size:allow-keywords; } html:not(.aperturas) details::details-content{ block-size:0; overflow:hidden; transition: block-size var(--apertura-dur) var(--apertura-curva), content-visibility var(--apertura-dur) allow-discrete; } html:not(.aperturas) details[open]::details-content{ block-size:auto; } } /* --- 5. MOVIMIENTO REDUCIDO ---------------------------------------------- Quien lo pide abre y cierra en seco, que es justo lo que pidió. El script consulta la misma preferencia y ni siquiera lanza la animación de altura, así que aquí sólo hay que desactivar lo que es CSS puro. Y sobre todo: nada puede quedarse en cero. El panel abierto tiene que verse entero desde el primer fotograma, y el cerrado tiene que poder abrirse. */ @media (prefers-reduced-motion:reduce){ details.animando{will-change:auto} details.cerrando > :not(summary), html.anim .detalle.cerrando[open] > ul, .detalle.cerrando[open] > ul, .detalle.cerrando > summary::after, html.anim .detalle.cerrando > summary::after{ animation:none !important; opacity:1 !important; transform:none !important; } @supports selector(::details-content){ html:not(.aperturas) details::details-content{ transition:none !important; } } }