[6.x] Better collapsible sections

resources/js/components/ui/Publish/Sections.vue

@@ -74,18 +74,61 @@ function toggleSection(section) {
                 />
             </PanelHeader>
             <div
-                style="--tw-ease: ease;"
-                class="h-auto visible transition-[height,visibility] duration-[250ms,2s]"
-                :class="{ 'h-0! invisible! overflow-clip': section.collapsed }"
+                class="publish-section-collapsible grid"
+                :class="section.collapsed ? 'publish-section-collapsible--collapsed' : 'publish-section-collapsible--expanded'"
             >
-                <Card :class="{ 'p-0!': asConfig }">
-                    <FieldsProvider :fields="section.fields">
-                        <slot :section="section">
-                            <Fields />
-                        </slot>
-                    </FieldsProvider>
-                </Card>
+                <div class="publish-section-collapsible__inner min-h-0">
+                    <Card :class="{ 'p-0!': asConfig }">
+                        <FieldsProvider :fields="section.fields">
+                            <slot :section="section">
+                                <Fields />
+                            </slot>
+                        </FieldsProvider>
+                    </Card>
+                </div>
             </div>
         </Panel>
     </div>
 </template>
+
+<style scoped>
+[class*="publish-section-collapsible"] {
+    --speed: 0ms;
+    /* Only setting the animation speed when the panel is hovered prevents the animation triggering on page load. */
+    [data-ui-panel]:hover & {
+        --speed: 250ms;
+    }
+    --timing: ease;
+
+    @media (prefers-reduced-motion: reduce) {
+        --speed: 0ms;
+    }
+}
+
+.publish-section-collapsible--expanded {
+    /* We can animate collapse/expand using grid rows */
+    animation: expand-rows var(--speed) var(--timing) forwards;
+}
+
+.publish-section-collapsible--collapsed {
+    animation: collapse-rows var(--speed) var(--timing) forwards;
+}
+
+.publish-section-collapsible--expanded .publish-section-collapsible__inner {
+    animation: calc(var(--speed) * 2) var(--timing) section-fade-in both;
+    overflow: clip;
+}
+
+.publish-section-collapsible--collapsed .publish-section-collapsible__inner {
+    animation:
+        clip-overflow 0ms var(--speed) forwards,
+        make-invisible 0ms var(--speed) forwards;
+    overflow: clip;
+}
+
+@keyframes section-fade-in { from { opacity: 0%; } to { opacity: 100%; } }
+@keyframes make-invisible { from { visibility: visible; } to { visibility: hidden; } }
+@keyframes collapse-rows  { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
+@keyframes expand-rows    { from { grid-template-rows: 0fr; } to { grid-template-rows: 1fr; } }
+@keyframes clip-overflow  { to { overflow: clip; } }
+</style>