В общем, если вы выполняете изменение позиции одновременно с удалением элемента (т.е. без вычислений и другого кода между двумя операторами), то я ожидаю, что это будет слишком быстро, чтобы быть заметным, хотя вы всегда можете проверитьвыяснить.
Если вы хотите избежать этого, вам придется вместо этого выполнить некоторые виды постепенных изменений.Я не знаю, что mootools делает с точки зрения анимации (http://mootools.net/docs/core/Fx/Fx.Tween выглядит так, как вы хотите, но я не использую mootools - я предполагаю, что вы используете это или подобное, чтобы уже делать анимацию), но если бы вы могли его получитьанимировать ширину удаляемого элемента div до 0 вместо того, чтобы сдвигать весь лот вдоль (так что слева остается 0, но когда вы уменьшаете размер текущего видимого элемента, новый слайд отображается в виде).
You 'Я должен убедиться, что вы правильно выполнили переполнение «слайдов», чтобы убедиться, что контент не сдавливается и не отображается неправильно, когда он исчезает, но это должно сработать (если это возможно с mootools, что, я думаю, будет).
Тогда, разумеется, когда это элемент нулевой ширины, вы сможете удалить его, не влияя на внешний вид страницы.
Редактировать, чтобы добавить пример рабочего задания перехода ширины:
http://jsfiddle.net/A7YaW/ - это jsfiddle, основанное на странице, на которую вы ссылались с помощью различных операций.Код максимально похож на ваш, чтобы убедиться, что вы видите, что он делает.
Я сделал ключевые вещи, чтобы создать окно Welcome0, которое уже находится слева от экрана.,Я уменьшаю ширину этого до 0, что, в свою очередь, заставляет все остальные поля, которые всплывают влево, скользить вверх вместе с ним.Если ширина блока равна 0, мы можем без труда удалить его при следующем переходе.
Причина прыжка связана с вашим положением.Примерно связано с вашим позиционированием.Вы позиционируете вещи относительно, что означает, что их позиция соотносится со стандартной позицией, которой это должно быть.Когда вы удаляете элементы, вы балуетесь с этой базовой позицией и, таким образом, манипулируете вещами таким образом, который меня немного смущает.
Преимущество использования перехода по ширине состоит в том, что он изменяет только один элемент и значительнопроще.Также вы, вероятно, можете извлечь элемент из момента завершения перехода (я не смотрел, как делать что-то по завершении перехода), что кажется предпочтительнее, чем удалить его на следующей итерации.
Правкас объяснением того, почему оригинал не работал
Так как меня беспокоило то, что я не был уверен, почему оригинал прыгал, я сидел и решал все события, и так как я сделал этоЯ думал, что мог бы также поделиться.И поскольку он был самым простым, я включил диаграммы ascii art, чтобы показать, как движутся различные слайды в примере.Надеюсь, все это имеет смысл.:) Ключевым моментом является то, как работает position: relative, поэтому сначала посмотрите, если нужно.:)
-----------------------------------------
| Pos A | Pos B | Pos C | Pos D | Pos E |
-----------------------------------------
-710 0 710 1420
В приведенном выше положении B отображается видимое окно просмотра.
При первом просмотре страницы четыре слайда (с 1 по 4) находятся в положениях B, C, D иE соответственно.
При первом переходе вы устанавливаете левое положение первых двух слайдов на -710.Это перемещает их (и только их) влево на столько.
Ваши слайды теперь находятся в позициях:
1 = A
2 = B
3 = D
4 = E
при следующем запуске, когда вы удаляете первое, что делаетеудалить слайд 1. На этом этапе «естественный» макет страницы (т. е. перед любым стилем перемещения) имеет слайды 2–4 в позициях от B до D. Однако слайд 2 имеет позиционирование на нем, чтобы сделать его относительно -710 пикселей относительноперемещая его немедленно в положение A, в то время как 3 и 4 остаются в положениях C и D. Затем вы применяете эффект перехода к слайду 2 и 3. Он не влияет на слайд 2 (потому что у него уже есть этот стиль), и слайды 3 показываются на экране.как и ожидалось.Затем он повторяется ...
, так схематично
Start:
----------------------------------------------
| | Slide1 | Slide2 | Slide3 | Slide4 |
----------------------------------------------
Click 1 - After transition
----------------------------------------------
| slide1 | Slide2 | | Slide3 | Slide4 |
----------------------------------------------
Click 2 - After delete
----------------------------------------------
| slide2 | | Slide3 | Slide4 | |
----------------------------------------------
Click 2 - After transition
----------------------------------------------
| slide2 | Slide3 | | Slide4 | |
----------------------------------------------
Click 3 - After Delete
----------------------------------------------
| slide3 | | Slide4 | | |
----------------------------------------------
Click 3 - After transition
----------------------------------------------
| slide3 | Slide4 | | | |
----------------------------------------------