为什么我的 JavaFX ImageView 没有使用淡入淡出转换显示/隐藏？答案

【问题标题】：Why my JavaFX ImageView is not showing/hiding using the Fade Transition?为什么我的 JavaFX ImageView 没有使用淡入淡出转换显示/隐藏？
【发布时间】：2017-04-10 17:58:56
【问题描述】：

我正在尝试向我的登录和注销 ImageViews 添加淡入淡出过渡，我尝试使用与 JFeonix Hamburger 相同的模式，我还在 oracle 文档中使用了一些教程，但是，我的 ImageViews 没有淡入淡出过渡隐藏并且立即显示。我错过了什么？

下面是我的代码：

@FXML
    private JFXHamburger menu;
    @FXML
    private ImageView login;
    @FXML
    private ImageView logout;

    private LoginLogic logic;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
        final HamburgerSlideCloseTransition slideCloseTransition = new HamburgerSlideCloseTransition(menu);
        slideCloseTransition.setRate(-1);

        FadeTransition t = new FadeTransition(new Duration(3000), login);
        FadeTransition t1 = new FadeTransition(new Duration(3000), logout);

        t.setCycleCount(1);
        t1.setCycleCount(1);

        t.setAutoReverse(false);
        t1.setAutoReverse(false);

        t.setRate(-1);
        t1.setRate(-1);

        menu.addEventHandler(MouseEvent.MOUSE_PRESSED, (MouseEvent event) -> {
            t1.setRate(t1.getRate() * -1);
            t.setRate(t.getRate() * -1);
            slideCloseTransition.setRate(slideCloseTransition.getRate() * -1);
            slideCloseTransition.play();
            t.play();
            t1.play();
            login.setVisible(!login.isVisible());
            logout.setVisible(!logout.isVisible());
        });
    }

谢谢。

【问题讨论】：

标签： javafx imageview fade transitions

【解决方案1】：

您不会使用FadeTransition 更改节点的外观，因为您仍在使用fromValue、toValue 和byValue 的默认值。

这意味着您实际上只需打开和关闭可见性...

通常只有不透明度被FadeTransition修改。

示例：

@Override
public void start(Stage primaryStage) {
    Button btn = new Button("fade in/out");

    ImageView image = new ImageView("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png");
    image.setOpacity(0);

    VBox root = new VBox(10, btn, image);
    root.setPadding(new Insets(10));

    FadeTransition t = new FadeTransition(Duration.seconds(3), image);
    t.setCycleCount(1);
    t.setAutoReverse(false);
    t.setRate(-1);
    t.setFromValue(0);
    t.setToValue(1);

    btn.setOnAction(evt -> {
        t.setRate(t.getRate() * -1);
        t.play();
    });

    Scene scene = new Scene(root);

    primaryStage.setScene(scene);
    primaryStage.show();
}

【讨论】：