mootools FX.slideOut折叠表行

Question

我借助mootools借助动态删除中的David Walsh tutorial借用了一些代码。

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

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

如何使此效果垂直平滑，而不是向左折叠，然后向上？

谢谢！

Answer 1

这是因为TR不是真正的块样式元素，而是display: table-row（iirc）。

Fx.Slide类实际上只有两个技巧，它试图让它看起来像是在解散，基本上：

1. 设置从可见到隐藏的溢出，这在TR的上下文中是没有意义的。
2. （可选）它可以将一个元素包装在一个包装器中，然后折叠它，但是再一次，包装器成为元素的直接父元素，它是一个div，你不能在表中做。
然后它允许它操纵元素的高度并使其变小等。

跳跃发生了，因为它改变了显示/溢出，并且在它折叠表之后一切都变得有趣。

你应该考虑另一种方法，比如淡入淡出和可用时，缩放变换。

Answer 2

我担心Fx.Slide无法使用表格行，但只能使用块元素。
正如Dimitar Christoff对你说的那样。

我修改了你的小提琴以解决这个问题。从您发布的代码来看，似乎您对Mootools非常实用，所以我只是对代码写了一些评论。我相信你会得到这个伎俩。

  

<强> http://jsfiddle.net/gNvvT/5/

让我知道它是否适用于现实世界应用程序！

编辑。我之前的测试中遗漏了一些无用的代码。我删除了它，并更新了小提琴网址。