Fade In/ Fade Out a Screen in JavaFx - animation

Question

I made a JavaFx application that has a main screen. And that main screen contains buttons, each button shows different screens. Now I want, when I press a button, my current screen to FadeOut and new screen to FadeIn.
public class GuiPractice extends Application {
private Stage stage;
public static void main(String[] args) {
Application.launch(GuiPractice.class, (java.lang.String[])null);
}
#Override
public void start(Stage primaryStage) throws Exception {
try{
stage = primaryStage;
stage.setTitle("HOME SCREEN");
gotoWelcome();
stage.show();
} catch(Exception ex){
Logger.getLogger(GuiPractice.class.getName()).log(Level.SEVERE,null,ex);
}
}
private void gotoWelcome(){
try{
WelcomePageController wc = (WelcomePageController) replaceScene("WelcomePage.fxml"); // Check 'replaceScene' Below
wc.setApp(this);
} catch (Exception ex){
Logger.getLogger(GuiPractice.class.getName()).log(Level.SEVERE,null,ex);
}
}
// When I Press Button Action Handler Calls This Method..
// This Method is Working Fine, Except For the FandIn Portion
private void gotoSignin(){
try{
SigninPageController wc = (SigninPageController) replaceScene("SigninPage.fxml"); // Check 'replaceScene' Below
wc.setApp(this);
/// THIS PORTION IS FADE TRANSITION, IT IS NOT WORKING
FadeTransition ft = new FadeTransition(Duration.millis(3000));
ft.setFromValue(0.0);
ft.setToValue(1.0);
ft.play();
} catch (Exception ex){
Logger.getLogger(GuiPractice.class.getName()).log(Level.SEVERE,null,ex);
}
}
private Initializable replaceScene(String fxml) throws Exception {
FXMLLoader loader = new FXMLLoader();
InputStream ins = GuiPractice.class.getResourceAsStream(fxml);
loader.setBuilderFactory(new JavaFXBuilderFactory());
loader.setLocation(GuiPractice.class.getResource(fxml));
AnchorPane page;
try {
page = (AnchorPane) loader.load(ins);
} finally {
ins.close();
}
Scene scene = new Scene(page);
stage.setScene(scene);
stage.sizeToScene();
return (Initializable) loader.getController();
}
}

Answer 1

You need to pass the node on which you want to apply the Transition to the constructor of the FadeTransition.
Approach 1
So you can take the following lines and put them inside your replaceScene() before scene = new Scene(page)
page = (AnchorPane) loader.load(ins);
FadeTransition ft = new FadeTransition(Duration.millis(3000), page);
ft.setFromValue(0.0);
ft.setToValue(1.0);
ft.play();
Scene scene = new Scene(page);
Though, there will be a Fading Effect on the welcome screen as well and you will have to apply some logic to avid it !
Approach 2
Load the fxml inside the gotoSignin()/ Get the Anchorpane reference and pass it to the controller. Though, I believe this will bring a lot of changes for your current design ! You can take a call and decide !
Hope it helps !

Answer 2

Yeah, of course, you could have an fade out effect - just inverse values from and to, of your FadeTransition, like:
FadeTransition ft = new FadeTransition(Duration.millis(3000), page);
ft.setFromValue(1);
ft.setToValue(0);
ft.play();