Css JavaFx中的向下滑动TableView

我正在尝试使用我的tableview向下滑动efect，如下所示： 我真的不知道该怎么做

这是我的简单程序，它显示一个按钮和一个表视图。

这是我的主类代码：

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application{

    Stage window;
    TableView <Product> table;
    Button showTableButton;

public static void main(String[] args) {
    launch(args);
}

@Override
public void start(Stage primaryStage) throws Exception {
    window = primaryStage;
    window.setTitle("Liga Pilkarska");

    //First Column 
    TableColumn<Product, String> nameColumn = new TableColumn<>("Name");
    nameColumn.setMinWidth(200);
    nameColumn.setMaxWidth(200);
    nameColumn.setCellValueFactory(new PropertyValueFactory<>("name"));

    //Second COlumn
    TableColumn<Product, Double> priceColumn = new TableColumn<>("Price");
    priceColumn.setMinWidth(100);
    priceColumn.setMaxWidth(100);
    priceColumn.setCellValueFactory(new PropertyValueFactory<>("price"));

    //Third Column
    TableColumn<Product, String> quantityColumn = new TableColumn<>("Quantity");
    quantityColumn.setMinWidth(200);
    quantityColumn.setMaxWidth(200);
    quantityColumn.setCellValueFactory(new PropertyValueFactory<>("quantity"));

    //Creating a table and adding columns
    table = new TableView();
    table.setItems(getProduct());
    table.getColumns().addAll(nameColumn, priceColumn, quantityColumn);

    table.setFixedCellSize(25);

    //setting height of table       
    table.prefHeightProperty().bind(table.fixedCellSizeProperty().multiply(Bindings.size(table.getItems()).add(1.01)));
    table.minHeightProperty().bind(table.prefHeightProperty());
    table.maxHeightProperty().bind(table.prefHeightProperty());

    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
    showTableButton = new Button("Show Table");

    VBox vBox = new VBox();
    vBox.getChildren().addAll(showTableButton,table);

    //Creating scene
    Scene scene = new Scene(vBox, 800,600);
    scene.getStylesheets().add("Viper.css");
    window.setScene(scene);
    window.show();

}

public ObservableList<Product> getProduct(){
    ObservableList<Product> products = FXCollections.observableArrayList();
    products.add(new Product("Laptop", 2300, 10));
    products.add(new Product("Latarka", 50, 19));
    products.add(new Product("Suszarka", 89.99, 22));
    products.add(new Product("Monitor", 100, 44));
    products.add(new Product("Kukurydza", 1.5, 1));

    return products;
}

}

所以，如果我单击或悬停在按钮上，tableView应该开始执行向下滑动效果。

---

如果有人知道如何做到这一点，那就太好了。

您可以使用动画标题窗格（容器）轻松选择，将动画标志设置为TRUE，并在触发所需事件时调用expand

或者更好的方法是创建单独的线程，为TableView的首选/最小大小设置动画，这取决于将组件放置在何种容器中。从动画线程开始，不要忘记在JFXAT上设置大小，在动画线程上设置睡眠。

---

为了防止两个动画同时运行，请使用线程在执行前必须检查的锁/标志。简单的布尔值就足够了。

我找到了解决方案，也许它对某人有帮助

我们需要从转换中重写

插值

方法。 所以我创建了一个新类来扩展转换

import javafx.animation.Transition;
import javafx.scene.control.TableView;
import javafx.util.Duration;

public class ResizeTheHeightOfTableView extends Transition{

public TableView<Product> table;
public int maxSize;

public ResizeTheHeightOfTableView(Duration duration, TableView<Product> table, int maxSize){
    setCycleDuration(duration);
    this.maxSize = maxSize;
    this.table = table;
}

@Override
protected void interpolate(double fraction) {
    table.setFixedCellSize(fraction * maxSize );
}

}

别忘了导入持续时间：

import javafx.util.Duration;

ResizeTheHeightOfTableView ft = new ResizeTheHeightOfTableView(Duration.millis(500), table, 25);
showTableButton.setOnAction(e -> ft.play());

import javafx.util.Duration;