mootools FX.slideOut折疊表格行

Question

我是從David Walsh的教程中借用了一些代碼，該教程介紹了如何使用mootools進行動畫刪除。

當我在表行上使用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/

讓我知道它是否適用於您的實際應用！

編輯。 我以前的測試中留下了一些無用的代碼。 我刪除了它，並更新了小提琴URL。