Why my JavaFX ImageView is not showing/hiding using the Fade Transition?

Question

I m trying to add a fade transition to my login and logout ImageViews, I tried to use the same pattern as the JFeonix Hamburger, I also used some tutorial at oracle docs but, there is no fade transition my ImageViews are hiding and showing instantly. What I'm missing ?

below is my code :

@FXML
    private JFXHamburger menu;
    @FXML
    private ImageView login;
    @FXML
    private ImageView logout;

    private LoginLogic logic;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
        final HamburgerSlideCloseTransition slideCloseTransition = new HamburgerSlideCloseTransition(menu);
        slideCloseTransition.setRate(-1);

        FadeTransition t = new FadeTransition(new Duration(3000), login);
        FadeTransition t1 = new FadeTransition(new Duration(3000), logout);

        t.setCycleCount(1);
        t1.setCycleCount(1);

        t.setAutoReverse(false);
        t1.setAutoReverse(false);

        t.setRate(-1);
        t1.setRate(-1);

        menu.addEventHandler(MouseEvent.MOUSE_PRESSED, (MouseEvent event) -> {
            t1.setRate(t1.getRate() * -1);
            t.setRate(t.getRate() * -1);
            slideCloseTransition.setRate(slideCloseTransition.getRate() * -1);
            slideCloseTransition.play();
            t.play();
            t1.play();
            login.setVisible(!login.isVisible());
            logout.setVisible(!logout.isVisible());
        });
    }

Thanks.

Answer 1

You're not changing the look of the node with the FadeTransition, since you're still using the default values for fromValue, toValue and byValue.

This means effectively you simply toggle the visibility on and off...

Usually only the opacity is modified by a FadeTransition.

Example:

@Override
public void start(Stage primaryStage) {
    Button btn = new Button("fade in/out");

    ImageView image = new ImageView("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png");
    image.setOpacity(0);

    VBox root = new VBox(10, btn, image);
    root.setPadding(new Insets(10));

    FadeTransition t = new FadeTransition(Duration.seconds(3), image);
    t.setCycleCount(1);
    t.setAutoReverse(false);
    t.setRate(-1);
    t.setFromValue(0);
    t.setToValue(1);

    btn.setOnAction(evt -> {
        t.setRate(t.getRate() * -1);
        t.play();
    });

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}