CSS-Tricks·2yTransitioning to Auto Height
Chrome Canary has introduced support for transitioning CSS properties to 'auto' values, significantly improving the ability to animate elements whose dimensions are unknown. This feature helps avoid the need for fixed-height transitions, allowing for more dynamic and responsive designs. The implementation leverages CSS 'calc()' to compute dimensions dynamically, and can handle properties like height, block-size, width, and inline-size. Additionally, transitioning from 'display: none' remains complex but doable with 'transition-behavior: allow-discrete' and '@starting-style' declarations.