重新創建jQuery的slideUp和slideDown，但對於slideRight和slideLeft來說呢？

我使用slideUp和slideDown來爲使用AngularJS的ngShow隱藏和顯示的部分設置動畫。它工作正常，但我寧願有slideLeft和slideRight。我將如何去重新創建slideUp和slideDown？重新創建jQuery的slideUp和slideDown，但對於slideRight和slideLeft來說呢？

slideUp會自動隱藏該元素，並且slideDown會自動顯示它 - 我如何能夠配置它以便他們隱藏並顯示我想要的時間？例如：

$(element).slideLeftAndHide(); $(element).slideLeftAndShow();

與之相對

$(element).slideUp(); // $element.slideUpAndHide();

來源

2016-06-15 snazzybouche

使用jQuery動畫功能http://api.jquery.com/animate/或只是簡單的CSS動畫的東西 – Atticweb

既然你標記Angular.js，我想你」也重新使用Angular。你應該更喜歡使用類似ng-class的東西，而不是使用jQuery直接顯示和隱藏元素。這是一種很好的模塊化方式，可以使用現有的Angular.js功能和快速的CSS動畫來做你想做的事情。

我還假設你正在做顯示/隱藏部分以響應某種條件值更改，是嗎？

如果是這樣，到開始：

1.當條件值發生變化，讓DOM通過在條件成真的話添加類名知道。

<div ng-class="{showing: myDataFinallyLoaded}">...</div>

在這種情況下，如果myDataFinallyLoaded爲真，在div具有一個附加的showing類。

2.當div的showing類別名稱附加時，將其設置爲view。

div { 
    transform: translate(-100%) scale(0); 
    opacity: 0; 
    transition: transform 0.5s ease, opacity 0.5s ease; 
} 

div.showing { 
    /* Any CSS rules can go in here! */ 
    transform: translate(0px) scale(1); 
    opacity: 1; 
}

3.當條件成立時，更新範圍。

someRandomAPI.loadEverything().then(function() { 
    $scope.myDataFinallyLoaded = true; 
});

來源

2016-06-15 08:51:47 boxmein

這似乎是工作，但我將如何得到的div坐在同一排的時候他們顯示/隱藏？目前，每個div都佔據自己的行，直到它上面的div完全隱藏，然後向上移動。 – snazzybouche

我應該提到顯示/隱藏是爲了在兩個div之間傳遞視圖 - 一個隱藏，另一個隱藏 – snazzybouche

也許Angular有辦法讓任何你想要做的更好的事情......你能描述一下你的用例嗎？多一點？也許像'ng-repeat'或一個指令可以幫助這裏。（如果你不是在尋找一個非常通用的解決方案，只需在另一個div的ng-class屬性中顯示：！myDataFinallyLoaded就可以工作。） – boxmein

您可以使用以下方法來實現這一目標：

$('#element').show("slide", { direction: "left" }, "fast");

來源

2016-06-15 08:31:25 Sandman

重新創建jQuery的slideUp和slideDown，但對於slideRight和slideLeft來說呢？

回答

相關問題