mootools FX.slideOut сворачивает строку таблицы

Question

Я позаимствовал некоторый код из учебника Дэвида Уолша по анимированному удалению с помощью mootools.

Когда я использую Mootools FX.slide в строке таблицы, он как бы сворачиваетгрести горизонтально, прежде чем сдвинуть его вверх, что не является желаемым эффектом.

Здесь есть скрипка, если вы хотите взглянуть ... http://jsfiddle.net/gNvvT/

Как я могу сделать этот эффект плавным слайдом по вертикали, а не сворачиванием влево, а затем вверх?

Спасибо!

Answer 1

Боюсь, Fx.Slide не может работать со строками таблицы, но только с блочными элементами.
Как сказал вам Димитар Кристофф.

Я изменил вашу скрипку, чтобы обойти эту проблему. Из кода, который вы разместили, кажется, вы довольно практичны с Mootools, поэтому я просто написал несколько комментариев к коду. Я уверен, что вы поймете трюк.

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

Дайте мне знать, работает ли оно в вашем приложении real world !

Редактировать. Был некоторый бесполезный код, который я оставил после предыдущих тестов. Я удалил его и обновил URL скрипты.

Answer 2

это потому, что TR не являются реальными элементами стиля блока, это display: table-row (iirc).

Класс Fx.Slide на самом деле имеет всего 2 трюка, которые он пытается использовать, чтобы заставить его выглядеть как растворяющийся, в основном:

1. установить переполнение с видимого на скрытое, что в контексте ТР не имеет смысла.
2. (необязательно): он может обернуть элемент в оболочку, а затем свернуть ее, но снова оболочка становится прямым родителем элемента, и это div, что вы не можете сделать в таблице.

затем позволяет манипулировать высотой элемента, уменьшать его и т. Д.

скачок происходит, когда он меняет отображение / переполнение, и все это становится забавным после того, как он сворачивает таблицу.

вам следует рассмотреть альтернативный способ, например, затухание и, если возможно, масштабное преобразование.