过渡时间和变换功能在CSS中不起作用

Question

我正在 IntelliJ IDEA 2023.2（终极版）中使用 javafx 20.0.1 构建一个应用程序。这是我的 CSS 代码：

.menu_bar {
    -fx-background-color: #FFC7C7;
}

.menu_bar Button {
    -fx-background-color: transparent;
}

.menu_bar Button:hover {
    -fx-scale-x: 1.2;
    -fx-scale-y: 1.2;
    transform: rotate(30deg);
    transition: -fx-scale-x 8s, -fx-scale-y 8s, transform 0.8s;
}

第一个问题是未应用过渡时间（“8 秒”），就像当我将鼠标悬停在按钮上时，它们会立即进行比例过渡。第二个问题是“变换”，无论我使用什么函数进行变换，我总是会遇到这样的错误

Nov 12, 2023 10:27:33 PM javafx.css.CssParser declaration
WARNING: CSS Error parsing file:/C:/Users/ADMIN/IdeaProjects/ElearnApp_javafx_Group8/target/classes/Styles/MenuBar.css: Unexpected function 'rotate(' while parsing 'transform' at [13,15]

我该如何解决这个问题？

Answer 1

这里是 JavaFX CSS 参考。

如果您尝试使用的 CSS 功能没有在那里记录，则不支持它。

正如 James_D 在评论中指出的：

JavaFX CSS 不支持变换或过渡。

对于变换，只需使用

-fx-rotate: 30;

。 对于转换，您必须在 Java 中通过在按钮的悬停属性上注册侦听器来完成此操作。

有关类似功能，请参阅此答案：

• https://stackoverflow.com/a/77386307/2189127