JavaFX FadeTransition conflicting with CSS -fx-opacity - css

Question

Im building a custom composite UI Control in JavaFX with a button, that should fade in from 0 to 0.1 opacity if hovering somewhere over the Control. If hovering over the button itself, opacity should change to 1.0, which can easily be achieved via CSS.
Here the FadeTransition:
// unfortunately, animations cannot be defined in CSS yet
FadeTransition fadeInButton =
new FadeTransition(Duration.millis(300), settingsButton);
fadeInButton.setFromValue(0);
fadeInButton.setToValue(0.1);
And here the CSS for the button:
.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? */
}
Both animation and CSS properties work great separately. Unfortunately, in combination, the animation seems to override the -fx-opacity property in the CSS file. Any ideas how to make both animation and CSS properties work together?

Answer 1

There is no way to have css over API call, see next topic: JavaFX: Cannot set font size programmatically after font being set by CSS
But you can do next trick:
Have button with opacity 0.1 unhovered and 1 if hovered
Put button into Pane and animate this pane from 0 to 1
See next css:
/*Button*/
.b1 { -fx-opacity: 0.1; }
.b1:hover { -fx-opacity: 1.0; }
/*Pane*/
.p1 {
-fx-border-color: red;
-fx-opacity: 0;
}
and code:
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(); }
}