JavaFX FadeTransition 与 CSS -fx-opacity 冲突

Question

我正在用一个按钮在 JavaFX 中构建一个自定义复合 UI 控件，如果将鼠标悬停在控件上的某个位置，它应该从 0 淡入到 0.1 不透明度。如果将鼠标悬停在按钮本身上，不透明度应更改为 1.0，这可以通过 CSS 轻松实现。

这里是 FadeTransition：

// unfortunately, animations cannot be defined in CSS yet
FadeTransition fadeInButton =
    new FadeTransition(Duration.millis(300), settingsButton);
fadeInButton.setFromValue(0);
fadeInButton.setToValue(0.1);

这里是按钮的 CSS：

.settings-button {
    -fx-background-image: url("settings_32_inactive.png");
    -fx-background-repeat: no-repeat;   
    -fx-background-position: center center;
    -fx-opacity: 0; /* button shall be initially invisible, will be faded in */
}

.settings-button:hover {
    -fx-background-image: url("settings_32.png");
    -fx-opacity: 1.0; /* why is this ignored if used together with animations? */
}

animation 和 CSS 属性单独工作时效果很好。不幸的是，结合起来，动画似乎覆盖了 CSS 文件中的 -fx-opacity 属性。任何想法如何使动画和 CSS 属性一起工作？

Answer 1

没有办法通过 API 调用 css，请参阅下一个主题：JavaFX: Cannot set font size programmatically after font being set by CSS

但你可以做下一个技巧：

• 按钮不透明度为 0.1，悬停时为 1
• 将按钮放入窗格中，并将此窗格的动画从 0 变为 1

查看下一个 CSS：

/*Button*/
.b1 { -fx-opacity: 0.1; }
.b1:hover { -fx-opacity: 1.0; }
/*Pane*/
.p1 {
    -fx-border-color: red;
    -fx-opacity: 0;
}

和代码：

public class OpacityCss extends Application {

    private static final Duration DURATION = Duration.millis(300);

    @Override
    public void start(Stage primaryStage) {
        Pane pane = new Pane();
        pane.getStyleClass().add("p1");
        pane.setMinSize(100, 100);
        pane.setMaxSize(100, 100);

        final Button btn = new Button("Fading Button");
        btn.getStyleClass().add("b1");
        pane.getChildren().add(btn);

        final FadeTransition fade = new FadeTransition(DURATION, pane);
        fade.setAutoReverse(true);
        fade.setFromValue(0);
        fade.setToValue(1);

        pane.setOnMouseEntered(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent t) {
                fade.setCycleCount(1); // this way autoreverse wouldn't kick
                fade.playFromStart();
            }
        });

        pane.setOnMouseExited(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent t) {
                fade.setCycleCount(2); // starting from autoreverse
                fade.playFrom(DURATION);
            }
        });

        StackPane root = new StackPane();
        root.getChildren().addAll(pane);
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(getClass().getResource("/css/btn.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) { launch(); }
}