如何使用css3动画制作这个Jquery animate（）？

Question

这是我的小伙伴

这是我的实际代码

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

（我不知道为什么'左'没有在jfiddle上工作）基本上我有一个带5张卡的容器。 当用户滑动卡片（已经实现）时，会触发animate（）并且卡片向右滑动然后消失。 如何在CSS动画中实现这样的东西，而不是使用Jquery？ 我已经读过CSS动画运行得更快（我在我的移动设备上证明了它，hide（）运行速度很慢）...任何帮助或建议将不胜感激

Answer 1

1. 你的左边没有用，因为你需要将position设置为static （默认值）以外的值才能工作。
2. 至于使用CSS，你可以在jQuery中添加一个类而不是动画。 此类可以根据您的要求更改您可以在css中设置的转换。

 var my_div = $('.myelement'); my_div.on('click', function() { var $this = $(this); $this.addClass("gone"); setTimeout(function(){ $this.hide(); }, 600 ); }) 

 #mywrapper { overflow: hidden; } .myelement { height: 200px; width: 200px; background-color: red; opacity: 1; position: relative; transition: all 0.5s ease; opacity: 1; left: 0px; } .myelement.gone { left: 500px; opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="mywrapper"> <div class="myelement"> Click me please </div> </div> 

Answer 2

首先，创建一个可以通过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");

这是一个有效的JSFiddle 。

---

就像@MohitBhardwaj所说的那样，你需要将position设置为absolute ， relative或static ，以便定位（即left属性）才能工作。

同样重要的是要注意转换需要初始值 。 我添加了left: 0来做到这一点。 否则，（通过CSS转换）它只会跳转到2000px，因为没有起点。

另外，因为2000px作为left值非常大，我建议你将父元素的滚动更改为overflow: hidden ，这样就不会出现无关的滚动条。