2011-12-20 3 views
0

mootools로 애니메이션 삭제시 David Walsh tutorial에서 일부 코드를 빌려 왔습니다.mootools FX.slideOut 테이블 행을 접습니다

테이블 행에 Mootools FX.slide를 사용하는 경우, 원하는 효과가 아닌 테이블을 슬라이드하기 전에 행을 수평으로 접습니다. 당신이 look-- http://jsfiddle.net/gNvvT/

을하려는 경우

바이올린은 어떻게 위로 다음, 오히려 왼쪽 붕괴보다, 수직이 효과를 부드러운 슬라이드를 만들 수 있습니다 여기에있다?

감사합니다.

답변

2

Fx.Slide은 테이블 행에는 사용할 수 없지만 블록 요소에만 사용할 수 있습니다.
Dimitar Christoff가 말했듯이.

나는이 문제를 해결하기 위해 귀하의 피들을 수정했습니다. 게시 한 코드에서 Mootools를 사용하여 매우 실용적으로 보였으므로 코드에 대한 의견을 남겼습니다. 트릭을 얻을 것이라고 확신합니다.

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

하는 것은 당신의 실제 응용 프로그램에서 작동 알려줘!

편집. 이전 테스트에서 남긴 쓸모없는 코드가있었습니다. 나는 그것을 제거하고 나는 바이올린 URL을 업데이 트했습니다.

+0

공정하게, 노력을 위해 +1 :) 테이블을 보는 것조차 나를 요새화하게 만든다. http://shouldiusetablesforlayout.com/ –

+0

동의합니다. 블록 요소를 사용하여 테이블을 만드는 방법은 항상 있습니다 ... 그러나 실제로 테이블이 아주 편안한 경우가 있습니다 ... –

+0

@ DimitarChristoff-- 도움을 주셔서 감사합니다! 나는 두 가지 대답을 모두 받아 들일 수 있었으면 좋겠다. 대안과 예제를 보여줄 시간을 내 주셔서 감사합니다. 아마 div에서이 양식을 다시 작성하게 될 것이라는 데 동의하지만, 지금은 큰 변화를 원하지 않으므로 lorenzo의 해결 방법을 사용하고 있습니다. 둘 다 감사합니다. – julio

2

이것은 TR이 실제 블록 스타일 요소가 아니기 때문에 display: table-row (iirc)입니다.

Fx.Slide 클래스는 실제로 기본적으로, 용해 것처럼 보이게하기 위해 사용하려고 단지 2 트릭이있다 : 볼에서

  1. 설정 오버 플로우를 숨겨에있는 - 거래 정보 저장소의 맥락에서, 아니한다을 감각.
  2. (선택 사항) 래퍼에 요소를 래핑 한 다음 축소 할 수 있지만 다시 한 번 래퍼는 요소의 직접적인 부모가되며 div에 있으므로 테이블에서 수행 할 수 없습니다.

그것은 다음의 요소의 높이를 조작하고 만들 수 있도록 그 작은 등

이 표시/오버플로 변경하고 모두가 테이블을 붕괴로 후 재미 간다 점프가 일어난다.

fade와 같은 다른 방법을 고려해야하며, 가능한 경우 스케일 변환을 고려해야합니다.

+0

나는 까다로운 문제를 해결하기 위해 노력하고 있습니다 ... –

+0

그것은 까다로울 필요가 없습니다. 이것은 간단한 css 향상 및 규모입니다 : http://jsfiddle.net/dimitar/gNvvT/6/ - 지원되지 않는 경우 '.fade()'를 통해 대체 할 수 있습니다. –

+0

정확하게 작동하는 것을 만들려고했습니다. 줄리오가 의도 한대로. CSS3 전환을 사용하지 않습니다. 그러나'destroy.delay()'의 흥미로운 사용법은'.delay (function() {this.destroy();}가 더 쉽다는 것을 결코 생각하지 못했습니다.bind())'XD –

관련 문제