Question

我是CSS / HTML / JS的新手，所以我没有很多CSS过渡的经验。

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

这是我的问题：

在我的HTML中，我有一个div容器元素，里面有5个div元素。它们看起来像位于屏幕中间的简单盒子，暂时不可见。我还在屏幕的一角有5个按钮。

我要做的是：

当我点击一个按钮（例如按钮3）时，左侧div的3个应该消失并移动到屏幕边缘后面的左侧，其中2个div应该相同，但向右移动。之后，我想要右侧滑动的3个div返回到屏幕，右侧的2个div也应该向后滑动。所以看起来他们彼此滑向他们最初开始的位置。

我正在尝试使用CSS转换（transform：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之后运行动画，所以你的动画函数使用了错误的起点。

您需要的是：

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

您甚至可以在成功回调中重置的动画期间为div设置自定义z索引，从而允许您确定div通过/关闭的元素，或者指定哪些元素在彼此交叉时位于顶部。< / p>

CSS3过渡动画

1 个答案: