The Details block in WP admin createS an accordion using the details wrapping tag and a summary tag that holds the "question". When the "question" is clicked, the browswer inserts an "open" attribute on the details tag which (somehow) causes the details elmeent to expand to show it's "slots" (as they seem to be called in html) or what I would call the "hidden content". However, there are no eased transitions with respect the arrow that rotates when the hidden content is shown or for opening the hidden content: they both just snap open. To add softer transitions is a fair bit of work, but it should be done. Follow these steps:


1. ADD THE FOLLOWING CSS TO YOUR STYLE.CSS (this deals with rotating the icon or marker that's on the "question"): 

.wp-block-details summary::marker { 
	/*don't display the default "triangle" open close icon for details as it cannot be animated*/
	content: '';
}
summary {
	/*this puts styles on "trigger content" only, which cannot be done in WP admin styles where you can only put background on BOTH trigger content and hidden content. To put backgroundon hidden content, group all elmeents of the hidden content in the WP admin and put a background on that Group. OR style all hiden content background by putting a "details selector in this document and apply styles to it*/
  padding: 16px;
  background: #333;
  padding-left: 32px;
  position: relative;
}
summary:before {
  content: '';
  /*construct & position triangle begins*/
  border-width: 6.4px;
  border-style: solid;
  border-color: transparent transparent transparent #fff; /*change color of arrow here*/
  position: absolute;
  top: 20.8px;
  left: 16px;
  transform-origin: 3.2px 50%;
  /*construct & position triangle ends*/
	/*to use "content' instead add "+" or whatever to content above, remove code between "construct triangle begins" and add:
	color: white;
	font-size: 16px;
	display: inline-block;
	*/
  transform: rotate(0);
  transition: .5s transform ease;
}
details[open] > summary:before {
  transform: rotate(90deg);
}

2. Add the class "elementToHIdeOrShow" to a WP Group block that is within the Details block and which contains all of your hidden content.


3. NOTE:
To make the calculations of the closed height and open height, we need to make sure that the <summary> and the content always have the same height. [Kevin note: I think this just means don't add margin/height ON TRANSITION. I can add margin, at least, to the content to hide or show and things work fine]

For example, do not try to add a padding on the summary when it’s open because it could lead to jumps during the animation. Same goes for the inner content — it should have a fixed height and we should avoid having content that could change height during the opening animation.

Also, do not add a margin between the summary and the content as it will not be calculated for the heights keyframes. Instead, use a padding directly on the content to add some spacing.

4. Add the following javascript to your JS file (the only thing this lengthy script does is ease open and close the hidden content):

<script>
    
    //transition WP Details block open/close script begins
    
    //To make our code more reusable, we should make an Accordion class. By doing this we can call new Accordion() on every <details> element on the page.
    class Accordion {
        // The default constructor for each accordion. The constructor is the place we save all the data needed per accordion.
        constructor(el) {
            // Store the <details> element
            this.el = el;
            // Store the <summary> element
            this.summary = el.querySelector('summary');
            // Store the <div class="elementToHIdeOrShow"> element
            this.content = el.querySelector('.elementToHIdeOrShow'); //THIS "elementToHIdeOrShow" CLASS MUST BE PUT ON THE WP ADMIN GROUP THAT CONTAINS ALL THE CONTENT TO HIDE/SHOW!!!!!!!!!!!!!!!!!!!!!!

            // Store the animation object (so we can cancel it, if needed)
            this.animation = null;
            // Store if the element is closing
            this.isClosing = false;
            // Store if the element is expanding
            this.isExpanding = false;
            // Detect user clicks on the summary element
            this.summary.addEventListener('click', (e) => this.onClick(e));
        }

        // The onClick function is called when user clicks on the summary. In the onClick() function, you’ll notice we are checking if the element is being animated (closing or expanding). We need to do that in case users click on the accordion while it’s being animated. In case of fast clicks, we don’t want the accordion to jump from being fully open to fully closed. The <details> element has an attribute, [open], applied to it by the browser when we open the element. We can get the value of that attribute by checking the open property of our element using this.el.open.
        onClick(e) {
            // Stop default behaviour from the browser
            e.preventDefault();
            // Add an overflow on the <details> to avoid content overflowing
            this.el.style.overflow = 'hidden';
            // Check if the element is being closed or is already closed
            if (this.isClosing || !this.el.open) {
                this.open();
                // Check if the element is being openned or is already open
            } else if (this.isExpanding || this.el.open) {
                this.shrink();
            }
        }

        // The srink function is called to close the content with an animation. This shrink function is using the WAAPI .animate() function. You can read more about it in the MDN docs. WAAPI is very similar to CSS @keyframes. We need to define the start and end keyframes of the animation. In this case, we only need two keyframes, the first one being the current height the element, and the second one is the height of the <details> element once it is closed. The current height is stored in the startHeight variable. The closed height is stored in the endHeight variable and is equal to the height of the <summary>.
        shrink() {
            // Set the element as "being closed"
            this.isClosing = true;

            // Store the current height of the element
            const startHeight = `${this.el.offsetHeight}px`;
            // Calculate the height of the summary
            const endHeight = `${this.summary.offsetHeight}px`;

            // If there is already an animation running
            if (this.animation) {
                // Cancel the current animation
                this.animation.cancel();
            }

            // Start a WAAPI animation
            this.animation = this.el.animate({
                // Set the keyframes from the startHeight to endHeight
                height: [startHeight, endHeight]
            }, {
                // CHANGE THE DURATION OF THE SHOW HIDE ANIMATION HERE
                duration: 400,
                // You can also change the ease of the animation
                easing: 'ease-out'
            });

            // When the animation is complete, call onAnimationFinish()
            this.animation.onfinish = () => this.onAnimationFinish(false);
            // If the animation is cancelled, isClosing variable is set to false
            this.animation.oncancel = () => this.isClosing = false;
        }

        // Open function is called to open the element after click. The open function is called when we want to expand the accordion. This function does not control the animation of the accordion yet. First, we calculate the height of the <details> element and we apply this height with inline styles on it. Once it’s done, we can set the open attribute on it to make the content visible but hiding as we have an overflow: hidden and a fixed height on the element. We then wait for the next frame to call the expand function and animate the element.
        open() {
            // Apply a fixed height on the element
            this.el.style.height = `${this.el.offsetHeight}px`;
            // Force the [open] attribute on the details element
            this.el.open = true;
            // Wait for the next frame to call the expand function
            window.requestAnimationFrame(() => this.expand());
        }

        // The expand function is called to expand the content with an animation. The expand function is similar to the shrink function, but instead of animating from the current height to the close height, we animate from the element’s height to the end height. That end height is equal to the height of the summary plus the height of the inner content.
        expand() {
            // Set the element as "being expanding"
            this.isExpanding = true;
            // Get the current fixed height of the element
            const startHeight = `${this.el.offsetHeight}px`;
            // Calculate the open height of the element (summary height + content height)
            const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;

            // If there is already an animation running
            if (this.animation) {
                // Cancel the current animation
                this.animation.cancel();
            }

            // Start a WAAPI animation
            this.animation = this.el.animate({
                // Set the keyframes from the startHeight to endHeight
                height: [startHeight, endHeight]
            }, {
                // If the duration is too slow of fast, you can change it here
                duration: 400,
                // You can also change the ease of the animation
                easing: 'ease-out'
            });
            // When the animation is complete, call onAnimationFinish()
            this.animation.onfinish = () => this.onAnimationFinish(true);
            // If the animation is cancelled, isExpanding variable is set to false
            this.animation.oncancel = () => this.isExpanding = false;
        }

        // Callback when the shrink or expand animations are done. This function is called at the end of both the shrinking or expanding animation. As you can see, there is a parameter, [open], that is set to true when the accordion is open, allowing us to set the [open] HTML attribute on the element, as it is no longer handled by the browser.
        onAnimationFinish(open) {
            // Set the open attribute based on the parameter
            this.el.open = open;
            // Clear the stored animation
            this.animation = null;
            // Reset isClosing & isExpanding
            this.isClosing = false;
            this.isExpanding = false;
            // Remove the overflow hidden and the fixed height
            this.el.style.height = this.el.style.overflow = '';
        }
    }
    
//All that’s left is to use our Accordion class for every <details> element in the HTML. To do so, we are using a querySelectorAll on the <details> tag, and we create a new Accordion instance for each one.
    
    document.querySelectorAll('details').forEach((el) => {
        new Accordion(el);
    });

//transition WP Details block open/close script ends


</script>


5. ADDITIONAL CSS FOR MANIPULATING VARIOUS PORTIONS OF THE WP DETAILS BLOCK


/* Add a custom transition to hidden content (NOT the arrow or the actual hiding and unhiding the content) when opening/closing. */
.wp-block-details {
transition: all 0.5s ease-in-out;
}

/* Add horizontal margin to nested blocks/elements. */
.wp-block-details > :where( :not( summary ) ) {
margin-left: 2rem;
margin-right: 2rem;
}

/* If open, add some bottom padding to avoid content butting against the bottom. */
.wp-block-details[open] {
padding-bottom: 2rem;
}

/* Base `summary` element styling. */
.wp-block-details summary {
transition: all 0.5s ease-in-out;
box-sizing: border-box;
padding: 2rem;
font-weight: 500;
}

/* Change the background of the `summary` element based on state. */
.wp-block-details[open] summary,
.wp-block-details summary:hover,
.wp-block-details summary:focus {
background: #e2e8f0;
}