ng動畫動畫方向

我想獲得一些簡單的ng動畫行爲工作，但已經打到了牆上，並不能完全弄清楚我做錯了什麼。ng動畫動畫方向

我的代碼包含一個用於指示UI視圖應該從哪裏來的方向的類 - 一個用於顯示屏幕左側或右側的類的angularui ui-view，用於顯示滑動面板的顯示，或隱藏數據。

你可以在這裏看到我 - 注意鏈接箭頭的方向;

http://plnkr.co/edit/H2eRr5pPNKTDHXFXsyUn

所述UI視圖碼是：

<div ui-view class="{{whichWayToMove}}"></div>

與一對夫婦routeChange事件偵聽器來檢測時，相應的CSS應該改變的其中UI意見來自的方向。

我有一個感覺問題是一個範圍的問題，但會感謝一些外界的幫助。

來源

2014-04-28 GrahamB

我也有一個問題，有時滑錯了ui-view。我的問題是，該類是ui視圖的一部分，但ui視圖被重複以便能夠滑動一個視圖和一個視圖。在此重複期間，一個視圖獲得了舊類，另一個視圖獲得了該視圖像這樣的新更新類：

<div ui-view="" class="slide_from_left_to_right ng-animate ng-enter ng-enter-active"> 
</div> 
<div ui-view="" class="slide_from_right_to_left ng-animate ng-leave ng-leave-active"> 
</div>

這弄亂了動畫。將class="{{whichWayToMove}}"置於父項div可以防止這種情況發生，並使您的CSS更符合邏輯。 .slide_from_right_to_left將成爲RTL情況的父類，在這種情況下，兩個視圖的所有動畫都存在。你可以在plnkr看到我的意思。

來源

2014-07-03 13:41:25 bas

將方向類應用到'ui-view'的父容器中正是我一直在尋找！非常感謝！ – timetowonder

您的問題是，每次切換選項卡時，它會爲該選項卡創建一個新的控制器，以便您不斷註冊$ stateChangeStart的新偵聽器而不註銷舊的。這意味着當一個新的監聽器被註冊時（改變whichWayToRemove屬性）它最終會被註冊的第一個處理器覆蓋。

看看登錄到plnkr的控制檯，看看我的意思。

可以找到一個工作版本here，它監聽$ scope上的事件而不是$ rootScope，這樣，當控制器被刪除時，$ scope將與它一起被刪除，因此不再監聽$ stateChangeStart事件

更新

爲了讓動畫中，你只需要改變哪些類被置當一個箭頭的方向發生。這已在plnkr here中更新。我還刪除了監聽事件，因爲在創建控制器時whichWayToMove屬性將剛剛設置。

來源

2014-04-28 16:55:56 Theo

謝謝你。它還沒有工作 - 當標籤2進入視圖時它正常工作，但是當點擊標籤2上的鏈接時，它不會沿箭頭方向移動。我一直在努力工作的是讓兩個標籤都朝相同的方向移動，1或2移動到左側，或1和2移動到右側。 – GrahamB

我已經更新了我的答案，包括如何獲得箭頭後面的動畫。當你說你想讓兩個標籤都朝着同一個方向思考時，我不確定你在找什麼。這是否意味着你不想讓他們跟隨箭頭？無論如何，你應該能夠完成你現在需要的東西 – Theo

使用'ng-class'而不是'class' – zainengineer

ng動畫動畫方向

回答

相關問題