javascript - 删除另一个元素时停止 float div 捕捉

Question

我对 JavaScript 很陌生，如果这是一个愚蠢的问题，我深表歉意。

我想制作一个滚动条式元素。我查看了 Mootools 并使用它的 FX.Transitions 我可以让 Div 元素很好地滑动。

它的工作原理是让一个 710 像素宽的 div 位于屏幕中央，我将其称为视口(viewport)。在这个 div 里面是另一个，更宽，子 div 都 float 到左边。当用户单击下一步按钮时，我将当前查看的元素和下一个元素的 css left 属性设置为 -710px，使用 mootools 将它们很好地滑过。所以:

• 左侧位置:不可见，用户看过并点击下一步的旧幻灯片
• 中心位置:此时屏幕上显示的内容
• 正确位置:不可见，用户的下一张幻灯片

用户看到旧元素滑出，新元素滑入。这一切都很好。

但是，在下一次点击时，我想删除用户已经看过(但目前不可见)的旧幻灯片。我查看了如何在 JavaScript 中执行此操作，它工作正常。但是在我删除它的那一刻，当前的中心元素突然向左移动(而不是滑动)，因为它有 left: -710px 将它带到中心，并且有 float:离开了!

我可以通过在删除后设置 left: 0px 来解决这个问题，这会将它放回到它所属的中心，但我担心在慢速浏览器上，用户会看到闪烁元素向左对齐，然后在我更正它时重新出现。

我希望这是有道理的 - 如果没有，我可以将代码上传到某个地方。

有没有办法可以删除最左边的旧元素并防止其他元素移动？例如，我可以通过一种方式告诉浏览器“请暂时不要重绘”？还是我问了一个愚蠢的问题，删除和更正之间的时间太快，用户根本不会注意到闪烁？或者是否有更智能的元素布局方式？

谢谢!

编辑:这里的例子:jsfiddle.net/Az5Lg

Answer 1

一般来说，如果您在删除元素的同时进行位置更改(即两个语句之间没有计算和其他代码)，那么我希望它太快而不会被注意到，尽管您总是可以测试查出。

如果你确实想避免这种情况，你将不得不做一些渐进的改变。我不知道 mootools 在动画方面做了什么(http://mootools.net/docs/core/Fx/Fx.Tween 看起来像你想要的但我不使用 mootools - 我假设你正在使用这个或类似于已经做你的动画)但是如果你可以让它动画化被删除的 div 的宽度到 0 而不是滑动整个批处理(所以 left 仍然是 0 但是当你减小当前可视元素的大小时新的一个滑入 View )。

你必须确保你正确地完成了“幻灯片”的溢出，以确保内容不会被压扁并在它消失时出现错误，但这应该有效(如果我想象的 mootools 可能的话它会是)。

当然，一旦它是零宽度元素，您应该能够删除它而不影响页面外观。

编辑以添加宽度过渡的工作示例:

http://jsfiddle.net/A7YaW/是一个基于您与一些不同操作链接的页面的 jsfiddle。该代码与您的代码尽可能相似，以确保您可以看到它在做什么。

我所做的关键事情是创建一个已经位于屏幕左侧的 Welcome0 框。我将它的宽度向下滑动到 0，这反过来导致所有其他向左浮动的框也随之向上滑动。一旦框为 0 宽度，我们就可以在下一个转换中无缝地将其删除。

跳转的原因与你的定位有关。大致与你的定位有关。您正在相对定位事物，这意味着它们的位置与预期的标准位置相关。当您删除元素时，您会弄乱这个基本位置，从而以一种让我仍然感到困惑的方式来处理事情。

使用width transition的好处是只改变一个元素，简单很多。您也可以在过渡完成时将元素移除(我没有研究如何在过渡完成时做些什么)这似乎比在下一次迭代中移除它更可取。

编辑并解释原件为何不起作用

因为我不确定为什么原来的跳跃让我感到困扰，所以我坐下来解决了所有发生的事情，既然我已经做到了，我想我也可以分享。因为它是最简单的，所以我包含了 ascii 艺术图来展示示例中的各种幻灯片是如何移动的。希望这一切都有意义。 :) 关键在于如何处理 position: relative 的工作原理，所以如果需要，请先查找。 :)

  -----------------------------------------
  | Pos A | Pos B | Pos C | Pos D | Pos E |
  -----------------------------------------
-710      0      710     1420

在上面的位置 B 是您的可见视口(viewport)。

当您第一次查看页面时，您的四张幻灯片(1 到 4)分别位于位置 B、C、D 和 E。

当您第一次转换时，您将前两张幻灯片的左侧位置设置为 -710。这会将它们(并且只有它们)向左移动那么多。

您的幻灯片现在就位:

1 = A
2 = B
3 = D
4 = E

在下次运行时，当您删除时，您要做的第一件事是删除幻灯片 1。此时页面的“自然”布局(即在任何重新定位样式之前)是幻灯片 2 到 4 在位置 B 到D. 但是，幻灯片 2 的定位使其相对于 -710px 立即移动到位置 A，而 3 和 4 保留在位置 C 和 D。然后将过渡效果应用于幻灯片 2 和 3。它对幻灯片 2(因为它已经具有该样式)和幻灯片 3 按预期幻灯片进入 View 。然后重复...

如此图解

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 |        |        |        |
  ----------------------------------------------