如何在图标旋转动画完成后为.expanded类应用overflow: visible属性（仅使用CSS/Sass）

Absolutely! You can pull this off purely with CSS/Sass by syncing animation timelines to sequence the icon rotation and overflow change. Here's a clean, maintainable way to do it:

Step 1: Define Keyframes for Both Animations #

First, we'll create two keyframe animations: one for rotating the icon, and another to toggle the overflow property after the rotation finishes. Using a shared duration variable keeps everything in sync easily.

// Shared duration to align both animations
$rotate-duration: 0.3s;

// Animation for the icon's 90-degree rotation
@keyframes rotateFabIcon {
  from { transform: rotate(0deg); }
  to { transform: rotate(90deg); }
}

// Animation to reveal overflow only after rotation completes
@keyframes revealContent {
  0% { overflow: hidden; }
  // Keep overflow hidden until the very end of the animation
  99.9% { overflow: hidden; }
  100% { overflow: visible; }
}

Step 2: Apply Animations to Your Elements #

Attach these animations to the relevant elements, ensuring their durations match so the overflow change triggers exactly when the rotation finishes:

.expanded { 
    max-height: 1000px; 
    // Start with overflow hidden to match the animation's initial state
    overflow: hidden;
    // Run the overflow animation once and retain the final state
    animation: revealContent $rotate-duration forwards;

    .ui-collapse-header-button-container { 
        .ui-fab i { 
            // Run the rotation animation once and keep the rotated state
            animation: rotateFabIcon $rotate-duration forwards;
        } 
    } 
}

How This Works #

• The rotateFabIcon animation handles the icon's rotation over your specified duration (0.3s here).
• The revealContent animation keeps overflow: hidden for almost the entire duration, only switching to visible in the final frame. Since both animations share the same timeline, the overflow change happens immediately after the rotation completes.

Bonus: Flexibility with Variables #

If you want to adjust the animation speed later, just update the $rotate-duration variable—all timing will update automatically without hunting through multiple code blocks.

Key Notes #

• Ensure .expanded starts with overflow: hidden to avoid sudden content jumps before the animation begins.
• This method works in all modern browsers; vendor prefixes are rarely needed for current project support.

内容的提问来源于stack exchange，提问作者Manzana