Cómo animar el elemento de detalles

Aquí hay una demostración sencilla y agradable de Moritz Gießmann sobre cómo animar el triángulo de un detailselemento, que es la característica que le dice a la gente que esto se puede abrir . Animarlo es entonces otro tipo de posibilidad que le dice a la gente que esto se está abriendo ahora .

¿Los trucos?

1. Desactiva el triángulo predeterminado: details summary::-webkit-details-marker { display:none; }. No puedes animar ese.
2. Haz un triángulo de reemplazo con el truco del borde CSS y un pseudo elemento .
3. Anima el nuevo triángulo cuando el estado esté abierto: details[open] summary::before { transform: rotate(90deg); }.

Esto sólo anima el triángulo. El contenido del interior todavía se abre de golpe. ¿Quieres suavizar las cosas? “Cómo animar el elemento de detalles usando WAAPI” de Louis Hoebregts cubre eso.

Aquí hay un tenedor donde los combinaré solo porque:

Veo que Moritz puso el cursor: pointer;tema summarytambién como sugiere Greg Gibson .