CSS3 过渡动画

Question

我对 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)

    });

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

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

Answer 1

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

你需要的是：

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

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