I am trying to make an animation where a text field an some buttons appear when I press a toggle button, and when I press the toggle button again, it disappears. I have almost succeeded in, but each time I press the toggle button, the toggle menu moves further and further to the right. I'm not that good at explaining, but I made a little gif so you can see. https://gyazo.com/1bd43a95ec988edbce47704674c46418
Hope someone can help me! It is in the method called "routeBtnAction"
The animation method
@FXML
private void routeBtnAction(){
if (routeBtn.isSelected()) {
searchbar.setPromptText("From");
TranslateTransition slideIn = new TranslateTransition();
slideIn.setDuration(Duration.millis(250));
slideIn.setCycleCount(1);
slideIn.setNode(routeMenu);
slideIn.setByX(173);
slideIn.setInterpolator(Interpolator.EASE_OUT);
slideIn.play();
} else {
searchbar.setPromptText("Search");
TranslateTransition slideOut = new TranslateTransition();
slideOut.setDuration(Duration.millis(300));
slideOut.setCycleCount(1);
slideOut.setNode(routeMenu);
slideOut.setByX(-routeMenu.getWidth());
slideOut.setInterpolator(Interpolator.EASE_IN);
slideOut.play();
}
}
I found out. It's supposed to be setToX, not setByX! :)