mootools FX.slideOut сворачивает строку таблицы
Я позаимствовал некоторый код из учебника Дэвида Уолша по анимированному удалению с помощью mootools.
Когда я использую Mootools FX.slide в строке таблицы, она как бы сворачивает строку по горизонтали, прежде чем сдвинуть ее вверх, что не является желаемым эффектом.
Здесь есть скрипка, если вы хотите взглянуть... http://jsfiddle.net/gNvvT/
Как я могу сделать этот эффект плавным движением по вертикали, а не сворачиванием влево, а затем вверх?
Спасибо!
2 ответа
Боюсь Fx.Slide не может работать со строками таблицы, но только с блочными элементами.
Как сказал вам Димитар Кристофф.
Я изменил вашу скрипку, чтобы обойти эту проблему. Из кода, который вы разместили, кажется, вы довольно практичны с Mootools, поэтому я просто написал несколько комментариев к коду. Я уверен, что вы получите трюк.
Дайте мне знать, если это работает в вашем приложении реального мира!
Редактировать. Был некоторый бесполезный код, который я оставил от предыдущих тестов. Я удалил его и обновил URL скрипты.
Это потому что TR не настоящие блочные элементы стиля, это display: table-row (IIRC).
Fx.Slide класс на самом деле имеет всего 2 трюка, которые он пытается применить, чтобы заставить его выглядеть так, как будто он растворяется, в основном:
- установить переполнение с видимого на скрытое, что - в контексте TR, не имеет смысла.
- (необязательно) он может обернуть элемент в оболочку, а затем свернуть его, но еще раз оболочка становится прямым родителем элемента, а это div, что вы не можете сделать в таблице.
затем он позволяет манипулировать высотой элемента, уменьшать его и т. д.
скачок происходит, когда он меняет отображение / переполнение, и все это становится забавным после того, как он сворачивает таблицу.
Вы должны рассмотреть альтернативный способ, например, затухание и, если возможно, масштабное преобразование.