如何为ReactJS浮动操作按钮（FAB）的动作显示添加平滑动画？

你的动画不生效的核心原因是：.fab-action-button的transition属性只监听了opacity变化，没包含transform——而你用来控制显示/隐藏的关键变化（位移translateY和缩放scale）都属于transform，所以这些变化是瞬间完成的，看不到平滑过渡。

具体修复： #

1. 补全过渡属性 #

把transform加入过渡监听，或者直接用all覆盖所有可过渡属性，同时可以调整时长和缓动函数来匹配你想要的效果：

.fab-action-button {
    background-color: #fff;
    box-shadow: 0 3px 6px lightgrey;
    padding: 8px 0;
    margin: 10px;
    position: relative;
    z-index: 2;
    transform: translateY(20px) scale(0);
    /* 同时监听transform和opacity，调整时长让动画更自然 */
    transition: transform 0.3s ease-out, opacity 0.2s ease-out;
    opacity: 0;
}

.fab-action-button.open {
    transform: translateY(0) scale(1);
    opacity: 1;
}

2. 可选：实现按钮依次弹出效果 #

如果想让多个动作按钮依次平滑弹出，可以给每个按钮添加递增的过渡延迟：

/* 根据按钮数量设置延迟，数值可按需调整 */
.fab-action-button:nth-child(1) { transition-delay: 0s; }
.fab-action-button:nth-child(2) { transition-delay: 0.05s; }
.fab-action-button:nth-child(3) { transition-delay: 0.1s; }

这样修改后，无论是展开还是收起，按钮都会有平滑的位移、缩放和透明度变化，完全符合你的需求。

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