javascript - 如何使用 css3 动画制作此 Jquery animate()？

Question

This is my jfiddle

这是我的实际代码

$card.animate({
            left: "1000px"
        }, 500, function(){
            $card.hide(500);
        });

(我不知道为什么“left”在 jfiddle 上不起作用)基本上我得到了一个装有 5 张 $cards 的容器。当用户刷卡(已实现)时，将触发 animate() 并且卡向右滑动然后消失。我怎样才能在 CSS 动画中实现这样的东西而不是使用 Jquery？我读到 CSS 动画运行得更快(我在我的移动设备上证明了这一点，hide() 运行得非常慢)...任何帮助或建议将不胜感激

Answer 1

首先，创建一个可以通过 jQuery 触发的类，该类将具有动画。

然后，您有两个选择:transition 或 animation。过渡更简单、更直接，但您可以使用动画做更多的事情。

这是我建议的做法:移动的过渡，以及重新创建 hide() 函数的动画。

@keyframes hide {
    99% { display: auto; }
    100%{ display: none; opacity: 0; }
}
.myelement {
    transition: all .5s;
    position: absolute;
    left: 0;
}
.myelement.toLeft {
    left: 2000px;
    animation: hide .5s 1 forwards;
}

要触发它，只需执行以下操作:

$(".myelement").addClass("toLeft");

Here is a working JSFiddle .

---

正如@MohitBhardwaj 所说，您需要将position 设置为absolute、relative 或static 以便定位(即 left 属性)起作用。

同样重要的是要注意转换需要一个初始值。我添加了 left: 0 来执行此操作。否则，(使用 CSS 转换)它会简单地跳到 2000px，因为没有起点。

还有，因为2000px作为left的值很大，建议你把父元素的scroll改成overflow: hidden，这样多余的滚动条就不会了' t 出现。