fix: <details> collapse animation. closes: #4128

Author: saadeghi

packages/daisyui/src/components/collapse.css

@@ -165,7 +165,20 @@
 
 .collapse:is(details) {
   width: 100%;
-
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (transition: content-visibility allow-discrete) and (interpolate-size: allow-keywords) {
+      &::details-content {
+        transition:
+          content-visibility 0.2s allow-discrete,
+          height 0.2s;
+        height: 0;
+        interpolate-size: allow-keywords;
+      }
+      &:where([open], .collapse-open)::details-content {
+        height: auto;
+      }
+    }
+  }
   & summary {
     position: relative;
     display: block;

packages/docs/src/routes/(routes)/components/collapse/+page.md

@@ -88,11 +88,6 @@ classnames:
 </details>
 ```
 
-<div class="alert text-sm mt-4">
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
-  <div>Using <code>&lt;details&gt;</code> tag, we can't have animations because <code>&lt;details&gt;</code> tag doesn't allow CSS transitions.</div>
-</div>
-
 ### ~Without border and background color
 
 <div tabindex="0" class="collapse">