2

我对 CSS/HTML/JS 很陌生，所以我对 CSS 过渡没有太多经验。

我正在尝试为我的页面上的 div 元素设置动画，但到目前为止我无法达到预期的结果。

这是我的问题：

在我的 HTML 中，我有一个 div 容器元素，其中包含 5 个 div 元素。它们看起来像位于屏幕中间的简单框，目前不可见。我在屏幕一角也有 5 个按钮。

我想做的是：

当我单击一个按钮（例如按钮 3）时，左侧的 3 个 div 应该消失并移到屏幕边缘的左侧，而 2 个 div 也应该这样做，但向右移动。之后，我希望右侧的 3 个 div 滑回屏幕，右侧的 2 个 div 也应该滑回。所以看起来他们彼此滑动到他们最初开始的位置。

我正在尝试使用 CSS 转换（转换： translateX(Npx);) 来实现此效果。所以在我的 JS 文件中我有这样的东西：

$(document).ready(function() {

    $(".button").click(function(){

    // PART 1
       // move 3 divs to the left using transform: translateX(Npx) (no animation)
       // move 2 divs to the left using transform: translateX(Npx) (no animation)

    // PART 2
       // slide 3 divs to the left using transform: translateX(Npx) (with animation)
       // slide 2 divs to the left using transform: translateX(Npx) (with animation)

    });

所以问题是，在这种情况下，只有第一部分有效，第二部分似乎不起作用.....如果我将代码部分附加到不同的事件......就像另一个点击按钮......它只是工作美好的。

所以我的问题是这两个转换是否可以在一个事件下完成？！？！

4

1 回答 1

1

我做了这个，这样的效果可以很好看。如果我正确理解您的问题，您的问题是您在移动 div 之后运行动画，因此您的动画功能使用了错误的起点。

你需要的是：

  1. 确保你有一个 CSS position:relative; 在您的 div 上设置，以便动画可以工作。
  2. 运行动画函数，将 div 相对于它们的当前位置（即顶部、左侧）移动，并包含一个成功回调。您可能需要首先使用 offset() 和一些数学来计算行进的距离。
  3. 完成动画（成功回调）后，将 div 的相对位置更改回 0px（或之前的任何值），同时执行函数，使用 insertBefore() 将 div 实际移动到 DOM 中的新位置. 我从未见过闪烁，因为这些功能几乎是即时的，但是如果您发现问题，您可以在重置位置并移动 div 时将可见性设置为隐藏，然后再重置可见性

您甚至可以在动画期间为您的 div 设置自定义 z-index，并在成功回调上重置，从而允许您确定 div 越过/越过哪些元素，或者如果它们相互交叉，则指定哪些元素在顶部。

于 2013-01-16T18:27:49.743 回答