我怎樣才能使這個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動畫？

回答

相關問題