mootools FX.slideOut 折叠表格行

Question

我借用了 David Walsh 教程中关于使用 mootools 进行动画删除的一些代码。

当我在表格行上使用 Mootools FX.slide 时，它​​会在向上滑动之前水平折叠该行，这不是所需的效果。

如果您想看一下，这里有一个小提琴 - http://jsfiddle.net/gNvvT/

我怎样才能使这种效果垂直平滑滑动，而不是向左折叠，然后向上折叠？

谢谢！

Answer 1

恐怕 Fx.Slide 无法处理表格行，而只能处理块元素。
正如 Dimitar Christoff 对您所说的那样。

我已经修改了你的小提琴来解决这个问题。从你发布的代码来看，你对Mootools似乎很实用，所以我只是在代码上写了一些注释。我相信你会明白其中的窍门的。

http://jsfiddle.net/gNvvT/5/

让我知道如果它适用于您的现实世界应用程序！

编辑。我在之前的测试中留下了一些无用的代码。我删除了它并更新了小提琴 URL。

Answer 2

这是因为 TR 不是真正的块样式元素，它是 display: table-row (iirc)。

Fx.Slide 类实际上只有 2 个技巧，它尝试使用它来使其看起来像是正在溶解，基本上：

1. 将溢出从可见设置为隐藏，这在 TR 的上下文中是没有意义的。
2. （可选）它可以将元素包装在包装器中，然后折叠该元素，但包装器再次成为该元素的直接父级，并且它是一个 div，而您无法在表中执行此操作。

然后它允许它操纵元素的高度并使其变小等等。

跳跃发生在它改变显示/溢出时，并且当它折叠表格时一切都变得有趣。

您应该考虑另一种方法，例如淡入淡出和缩放变换（如果可用）。