如何使用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 ，這樣就不會出現無關的滾動條。