JFXButton with RAISED produces problem in animation

[TioCoding]

Hi, I'm using version 8.0.3 of JFoenix and I'm having problems making an animation. This is the code:

@Override
    public void start(Stage primaryStage) throws Exception {
        JFXButton buttonOne = new JFXButton();
        buttonOne.setStyle("-fx-background-color:RED");
        buttonOne.getStyleClass().add("fab-button");

        JFXButton buttonTwo = new JFXButton();
        buttonTwo.setStyle("-fx-background-color:BLUE");
        buttonTwo.getStyleClass().add("fab-button");
        buttonTwo.setScaleX(0);
        buttonTwo.setScaleY(0);

        buttonOne.setOnAction(event-> {
            SequentialTransition transition = new SequentialTransition();
            Timeline timelineOne = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonOne.scaleYProperty(), 0.0),
                    new KeyValue(buttonOne.scaleXProperty(), 0.0)));
            Timeline timelineTwo = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonTwo.scaleYProperty(), 1.0),
                    new KeyValue(buttonTwo.scaleXProperty(), 1.0)));

            transition.getChildren().addAll(timelineOne,timelineTwo);
            transition.play();
        });

        buttonTwo.setOnAction(event-> {
            SequentialTransition transition = new SequentialTransition();
            Timeline timelineOne = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonTwo.scaleYProperty(), 0.0),
                    new KeyValue(buttonTwo.scaleXProperty(), 0.0)));
            Timeline timelineTwo = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonOne.scaleYProperty(), 1.0),
                    new KeyValue(buttonOne.scaleXProperty(), 1.0)));

            transition.getChildren().addAll(timelineOne,timelineTwo);
            transition.play();
        });

        StackPane pane = new StackPane(buttonOne,buttonTwo);
        Scene scene = new Scene(pane,400,400);
        scene.getStylesheets().addAll(InsertFileDigemid.class.getResource("/css/clario-main.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

STYLE CSS:

.fab-button{
    -fx-pref-width: 60;
    -fx-pref-height: 60;
    -fx-background-radius: 60;
    -fx-border-radius: 60;
    -fx-cursor: hand;
    -jfx-button-type: RAISED; /* this produce the problem */
}

What this class does is open and close two JFXButtons, but for some reason when the JFXButton is with RAISED type it does not show the second JFXButton. Now when I comment on the css code line:

.fab-button{
    -fx-pref-width: 60;
    -fx-pref-height: 60;
    -fx-background-radius: 60;
    -fx-border-radius: 60;
    -fx-cursor: hand;
 /*-jfx-button-type: RAISED;  this produce the problem*/ 
}

The animation works perfectly. What is causing this problem? Thank you :)

[jfoenixadmin]

Hello, That's a very weird and unexpected issue :s , will look into it. Thanks @TioCoding for pointing out the issue 👍

Regards,

[jfoenixadmin]

Still not sure what's causing the issue :/, however I noticed that wrapping the buttons in a goup solve the issue: StackPane pane = new StackPane(new Group(buttonOne,buttonTwo));

[TioCoding]

I have tried in my implementation to add all my buttons inside a "Group", and to add to all the buttons the style "-jfx-button-type: RAISED;", but a very strange problem arises, when I click on the buttons, they move strangely, as if there were an animation inside. It's funny, this is the code, I've added some more lines:

@Override
    public void start(Stage primaryStage) throws Exception {
        JFXButton buttonOne = new JFXButton();
        buttonOne.setStyle("-fx-background-color:RED");
        buttonOne.getStyleClass().add("fab-button");

        StackPane.setMargin(buttonOne,new Insets(20)); // New line

        JFXButton buttonTwo = new JFXButton();
        buttonTwo.setStyle("-fx-background-color:BLUE");
        buttonTwo.getStyleClass().add("fab-button");
        buttonTwo.setScaleX(0);
        buttonTwo.setScaleY(0);

        StackPane.setMargin(buttonTwo,new Insets(20)); // New line

        buttonOne.setOnAction(event-> {
            SequentialTransition transition = new SequentialTransition();
            Timeline timelineOne = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonOne.scaleYProperty(), 0.0),
                    new KeyValue(buttonOne.scaleXProperty(), 0.0)));
            Timeline timelineTwo = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonTwo.scaleYProperty(), 1.0),
                    new KeyValue(buttonTwo.scaleXProperty(), 1.0)));

            transition.getChildren().addAll(timelineOne,timelineTwo);
            transition.play();
        });

        buttonTwo.setOnAction(event-> {
            SequentialTransition transition = new SequentialTransition();
            Timeline timelineOne = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonTwo.scaleYProperty(), 0.0),
                    new KeyValue(buttonTwo.scaleXProperty(), 0.0)));
            Timeline timelineTwo = new Timeline(new KeyFrame(Duration.millis(200),
                    new KeyValue(buttonOne.scaleYProperty(), 1.0),
                    new KeyValue(buttonOne.scaleXProperty(), 1.0)));

            transition.getChildren().addAll(timelineOne,timelineTwo);
            transition.play();
        });

        StackPane pane = new StackPane(new Group(buttonOne,buttonTwo)); // New line
        pane.setAlignment(Pos.BOTTOM_RIGHT); // New line
        Scene scene = new Scene(pane,600,500);
        scene.getStylesheets().addAll(InsertFileDigemid.class.getResource("/css/clario-main.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

[jfoenixadmin]

Sure thing, as the Group treats the child transformations and effects as part of its local bounds (unlike Pane).

[TioCoding]

And how could I solve the problem of 'Group'? For the animation to work perfectly together with the JFXButton and the style '-jfx-button-type: RAISED;'. Right now I have everything in a group, but in the same way when I activate the css '-jfx-button-type: RAISED;', every time I click on the JFXButton it moves by the shadow effect it has.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.