gwt - GWT中CellTable添加分页动画

Question

我正在尝试想出一种在 GWT 中为 CellTable 上的页面更改设置动画的方法，这与在 (http://gwt.google.com/samples/Showcase/Showcase.html) 上更改标签的方式相同#!CwTabLayoutPanel)。换句话说，新的表格页面将从顶部(或底部)滑入。CellTable 使用 SimplePager 来启动页面更改。

谢谢，马蒂亚斯

Answer 1

没有办法以简单的方式做到这一点，因为要制作幻灯片动画，您必须至少有 2 个已经呈现的页面:第一个移出，第二个替换第一个。在带有动画选项卡集的展示示例中，所有选项卡都已呈现并可以使用，但带有 SimplePager 的 CellTable 除了可见页面外没有呈现页面 - 新页面只是直接呈现到 CellTable 主体中。

因此，如果您真的想使用 CellTable 和 Pager 来创建这样的效果，您必须实现自己的 CellTable 和 Pager 对，它们将执行以下操作:

1. 保留 2 个具有渲染行的容器:一个可见，第二个隐藏。
2. CellTable 主体应该有视口(viewport)(只是一个带有“overflow:hidden”CSS 规则的
   )，里面会有两个容器。
3. 当分页器换页时，您必须强制 CellTable 将新行呈现到隐藏容器中。
4. 当呈现新数据时，将隐藏的容器放在适当的位置，以产生它继续可见的错觉，并使其可见；
5. 提供将两个容器移动到新位置的动画。我建议不要使用动画编码(例如定时器)——使用 CSS3 转换规则会更好更有效(参见“CSS3 transform Property”和/或“CSS3 transition Property”)。
6. 动画结束后，隐藏第一个容器并将指针切换到可见容器和隐藏容器 - 这样您就可以回到初始状态。

希望这对您有所帮助。