JavaFX - 混淆FadeTransition行为

Question

我正在尝试使用FXML和CSS为应用程序创建菜单场景。我们的想法是，当您按下“新”按钮时，其下方会出现另外两个按钮，而其余按钮会向下滑动。我还试图实现一个系统，如果再次按下“NEW”按钮，它将产生相反的效果。

实际上，第一次按下“NEW”按钮时，一切按计划进行：两个按钮淡入，其他按钮向下滑动。然而，翻译第二次发生但不是淡出...

我很困惑，希望得到一些帮助！这是控制器文件中的代码：

import javafx.animation.FadeTransition;
import javafx.animation.ParallelTransition;
import javafx.animation.TranslateTransition;
import javafx.beans.property.DoubleProperty;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.layout.*;
import javafx.util.Duration;


public class Menu implements ControlledScene {
private SceneController controller;

@FXML private Button newButton;
@FXML private Button continueButton;
@FXML private Button instructionsButton;
@FXML private Button settingsButton;
@FXML private Button exitButton;
@FXML private HBox subMenu;
@FXML private VBox translateMenu;

@FXML private void newButtonAction() {
    if (subMenuVisible.equals(false)) {
        subMenu.setVisible(true);

        FadeTransition fadeIn = new FadeTransition(Duration.millis(300), subMenu);
        fadeIn.setFromValue(0.0);
        fadeIn.setToValue(1.0);

        TranslateTransition translate = new TranslateTransition(Duration.millis(300), translateMenu);
        translate.setByY(100);

        ParallelTransition transitions = new ParallelTransition(translate, fadeIn);
        transitions.play();

        subMenuVisible = true;

    } else {
        FadeTransition fadeOut = new FadeTransition(Duration.millis(300), subMenu);
        fadeOut.setFromValue(1.0);
        fadeOut.setToValue(0.0);

        TranslateTransition translate = new TranslateTransition(Duration.millis(300), translateMenu);
        translate.setByY(-100);

        ParallelTransition transitions = new ParallelTransition(translate, fadeOut);
        transitions.play();

        subMenu.setVisible(false);
        subMenuVisible = false;
    }
}

FXML文件：

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

<?import javafx.geometry.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.GridPane?>
<?import java.net.*?>
<?import javafx.scene.control.Button?>

<GridPane fx:controller="timesup.menu.Menu" xmlns:fx="http://javafx.com/fxml/1" styleClass="grid">

<stylesheets>
    <URL value="@Menu.css" />
</stylesheets>

<Text text="Title!" id="title"
    GridPane.rowIndex="0" GridPane.halignment="center" GridPane.valignment="center" />

<Button text="NEW" fx:id="newButton" onAction="#newButtonAction"
    GridPane.rowIndex="1" GridPane.halignment="center" GridPane.valignment="center" />

<HBox xmlns:fx="http://javafx.com/fxml/1" fx:id="subMenu" styleClass="subMenu" spacing="10"
    GridPane.rowIndex="2" GridPane.halignment="center" GridPane.valignment="center" >
    <Button text="Random Words" id="randomWordsButton" onAction="#randomWordsButtonAction" />
    <Button text="Write your own" id="writeWordsButton" onAction="#writeWordsButtonAction" />
</HBox>

<VBox xmlns:fx="http://javafx.com/fxml/1" fx:id="translateMenu" spacing="10"
    GridPane.rowIndex="2" GridPane.halignment="center" GridPane.valignment="center" >
    <Button text="CONTINUE" fx:id="continueButton" onAction="#continueButtonAction" />
    <Button text="INSTRUCTIONS" fx:id="instructionsButton" onAction="#instructionsButtonAction" />
    <Button text="SETTINGS" fx:id="settingsButton" onAction="#settingsButtonAction" />
    <Button text="EXIT" fx:id="exitButton" GridPane.columnIndex="0"     onAction="#exitButtonAction" />
</VBox>

</GridPane>

用于衡量标准的CSS文件：

.grid {
-fx-background-color: white;
-fx-grid-lines-visible: true;
-fx-padding: 25;
-fx-vgap: 10;
-fx-alignment: center;
-fx-halignment: center;
}

#title {
    -fx-font-size: 100px;
    -fx-font-family: "Impact";
} 

.button {
    -fx-font-size: 30px;
    -fx-font-family: "Impact";
    -fx-cursor: hand;
    -fx-background-color: white;
    -fx-border-color: black;
    -fx-border-radius: 20px;
    -fx-border-width: 3px;
    -fx-background-radius: 20px;
}

.subMenu {
    visibility: hidden;
}

.button:hover {
    -fx-border-color: red;
    -fx-text-fill: red;
}

.vbox {
    -fx-spacing: 10;
    -fx-halignment: center;
}

感谢您的帮助！