我怎样才能使这个JQuery的动画（）与css3动画？

This is my jfiddle 我怎样才能使这个JQuery的动画（）与css3动画？

这是我的实际代码

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

（我不知道为什么“左” didnt上jfiddle工作），基本上香港专业教育学院有一个容器5个$卡在那里。当用户刷卡时（已经实现），animate（）被触发，卡片滑向右边，然后消失。我如何在CSS动画中实现这样的事情而不是使用Jquery？我读了CSS动画运行速度更快（我证明它在我的移动设备上，hide（）运行真的很慢）...任何帮助或建议，将不胜感激

来源

2016-07-14 Sebastian Ampuero Morisaki

欢迎来到SO，@SebastianAmpueroMorisaki！如果以下答案之一帮助您，请务必向社区显示它通过接受它来解决您的问题（单击答案旁边的绿色检查）。谢谢！ –

你的左侧没有工作，因为你需要将position设置为除static（默认值）以外的其他值才能工作。
至于使用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>

来源

2016-07-14 12:50:40

首先，创建一个类，您可以通过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的值非常大，所以我建议您将父元素的滚动更改为overflow: hidden，以便不出现无关滚动条。

来源

2016-07-14 12:53:42

我怎样才能使这个JQuery的动画（）与css3动画？

回答

相关问题