如何将平滑的动画应用到浮动操作按钮上的操作显示？

Question

我在reactjs中有代码，旨在在屏幕右下角显示一个浮动操作按钮。但是，在显示 FAB 操作时，我需要应用平滑的动画，以便它们从主（共享）按钮后面平滑地显示出来，就像我在 jsfiddle 上找到的这个示例 FAB Slow

为了解决我的问题，我在 CSS 中应用了一些转换和转换，但是，它不起作用。在FAB组件中有一个open状态，控制FAB是否打开，在Action组件中有一个className={

fab-action-button ${open ? "open" : ""}

}。我期望通过将过渡和变换应用于某些 css 类，可以实现平滑的动画。查看 css 代码的一些摘录和完整的 codepen 代码。

.fab-container {
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    margin: 0;
    padding: 0;
    bottom: 10px;
    right: 10px;
    transition: all 0.2s ease-in-out;
    z-index: 1000;
}
.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);
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

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

完整的codepen代码

PS：请有人帮助我，我需要解决这个问题。

Answer 1

根据您的代码，我猜测元素不存在于页面上。当我将鼠标悬停在左下角的按钮上时，它们就会被添加。

您需要首先将这些元素安装在页面上。然后你就可以在上面涂抹

css transition

。

因此

hover

css 属性对您的代码没有任何影响！

希望这有帮助。