Sliding Hidden Node - animation

Question

I have a question.
My question
How do I make the rectangle hide under the button when it slides. I do not want it to come out of the other side of the button.
package javafxapplication24;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.FlowPane;
import javafx.scene.layout.GridPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;
/**
*
* #author phili_000
*/
public class JavaFXApplication24 extends Application {
public Button by;
#Override
public void start(Stage stage) throws Exception {
FlowPane root = new FlowPane( );
root.setAlignment(Pos.CENTER);
Button butt = new Button("Play");
Rectangle rect = new Rectangle(200,40);
rect.setFill(Color.VIOLET);
TranslateTransition transition = new TranslateTransition(Duration.millis(6000),rect);
Scene scene = new Scene(root,700,700);
transition.setToX(-300);
root.getChildren().addAll(butt,rect);
butt.setOnAction((event) -> {
transition.play();
});
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I tried my best explaining, but if you have any questions. Or comment on how I can improve my questions. Please, don't hesitate to click that 'add comment' button and give me your ideas.

Answer 1

Add the rectangle first, then the button:
root.getChildren().addAll(text, butt);