How to make a block appear smoothly in JavaFX?

Question

JavaFX

Can you please tell me how to make when I click on a block (Inner AnchorPane with a red background) another block (Outer AnchorPane with a brown background) slides smoothly to the right, and when I click in the same area again, the block moves smoothly back?
I use Scene Builder
FXML

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/10.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane prefHeight="102.0" prefWidth="376.0" style="-fx-background-color: #DEB887;">
         <children>
            <AnchorPane prefHeight="102.0" prefWidth="72.0" style="-fx-background-color: #FF0000;" />
         </children>
      </AnchorPane>
   </children>
</AnchorPane>

Initial position:

The block must move to the right:

Answer 1

Don't use the visual editor.
Read what methods exist for the desired component and implement what you need.