JavaFX：StackPane 顺序转换

Question

AnchorPane我正在尝试在 3 个不同的（点击 a Button）之间切换FadeTransition，下面是我的代码，public class TestSlide extends Application {    private ObjectBinding<Node> frontNode;    @Override    public void start(Stage primaryStage) {        StackPane root = new StackPane();        AnchorPane pane1 = new AnchorPane(new Button("1"));        AnchorPane pane2 = new AnchorPane(new Button("2"));        AnchorPane pane3 = new AnchorPane(new Button("3"));        root.getChildren().addAll(pane1, pane2, pane3);        handleAnimation(root);        BorderPane border= new BorderPane(root);        HBox bottom = new HBox(10);        Button front1 = new Button("Pane 1");        Button front2 = new Button("Pane 2");        Button front3 = new Button("Pane 3");        front1.setOnAction((ActionEvent event) -> {            pane1.toFront();        });        front2.setOnAction((ActionEvent event) -> {            pane2.toFront();        });        front3.setOnAction((ActionEvent event) -> {            pane3.toFront();        });        bottom.getChildren().addAll(front1, front2, front3);        border.setBottom(bottom);        Scene scene = new Scene(border,400,400);        primaryStage.setScene(scene);        primaryStage.show();    }该handleAnimation方法引用自另一个 SO 帖子。问题是 ，启动应用程序后，单击Pane 1 Button。-> Transition 会先显示pane2然后再显示pane1。现在点击Pane 3 Button -> Transition 将首先显示pane2然后pane3.现在点击Pane 2 Button -> Transition 会出现pane2，以上两点提到的问题就不会再出现了。pane2为什么在第 1 点和第 2 点显示实际窗格之前显示过渡？是由于不透明度设置吗？为什么在第 3 点之后问题得到解决？我怎样才能在不显示第三个窗格的情况下使过渡工作FadeIn和FadeOut各自的工作？Pane

Answer 1

这里的问题是 的子级的初始状态StackPane是错误的：所有节点都具有不透明度 1。当没有动画运行时，您想要的状态具有所有节点，但最后一个完全透明（不透明度 = 0），最后一个完全透明不透明（不透明度 = 1）。您应该能够通过正确初始化不透明度来解决问题：

root.getChildren().addAll(pane1, pane2, pane3);

// set opacity for all but the last child to 0

List<Node> children = root.getChildren();

for (int i = children.size()-2; i >= 0; i--) {

    children.get(i).setOpacity(0);

}

否则会发生以下情况：

就在pane1.toFront(). 请注意 (SequentialTransition确保已建立动画开始的状态。

最顶层的节点是列表中的最后一个子节点，----...位于可见“层”的旁边。

Pane 1: opacity = 0

Pane 3: opacity = 1 ------------------------------

Pane 2: opacity = 1

现在，在完成前半部分后SequentialTransition，如下所示：

Pane 1: opacity = 0

Pane 3: opacity = 0

Pane 2: opacity = 1 ------------------------------

动画完成后：

Pane 1: opacity = 1 ------------------------------

Pane 3: opacity = 0

Pane 2: opacity = 1

使用pane3.toFront()产生类似的结果：

Pane 3: opacity = 0

Pane 1: opacity = 1 ------------------------------

Pane 2: opacity = 1

Pane 3: opacity = 0

Pane 1: opacity = 0

Pane 2: opacity = 1 ------------------------------

Pane 3: opacity = 1 ------------------------------

Pane 1: opacity = 0

Pane 2: opacity = 1