從jQuery遷移到AngularJS

我有一些有點過時的jQuery代碼。我正在嘗試將它遷移到AngularJS。作爲其中的一部分，我有一個如下所示的DIV：從jQuery遷移到AngularJS

<div id="infoMsg" class="infoMsg"></div>

有時這個DIV是隱藏的。有時它是可見的。其全部基於用戶行爲。要切換，我會使用jQuery的內置顯示/隱藏方法，如這樣的：

$("#infoMsg", "#myPage").hide(); 
$("#infoMsg", "#myPage").show("blind");

這裏的關鍵部分是節目（「盲」）的組成部分。 "blind" effect給出了滑動元素類型的外觀。我的問題是，我如何在AngularJS世界中做同樣類型的事情？

目前，我在我的範圍內定義了一個標誌$scope.showMessage = false。我的想法是切換，以使div可見或不可見。但是，這種方法並沒有給我帶來好的「盲目」效果。

來源

2014-04-04 user3284007

https：// stackoverflow。com/questions/12599637/angularjs-ng-show-ng-hide – jocken

Angular在angular-animate.js模塊中提供$animation服務和ngAnimate指令（您必須在angular.js之後單獨包含它）。這些東西提供了通過CSS轉換，CSS關鍵幀動畫或舊式JS超時循環/ DOM修改ala jQuery來實現動畫的鉤子。

我們鼓勵您使用CSS，因爲您可以獲得更好的性能，並且可以更輕鬆地將標記和應用程序代碼分開並維護演示文稿。

首先，developer guide on animations，第二，angular animate tutorial，最後是API docs for the ngAnimate module。

當您包含ngAnimate模塊時，某些指令會自動掛鉤爲動畫（如ngShow,ngHide,ngRepeat等）。默認情況下，他們只是添加類來觸發CSS轉換，你需要做的就是確保你有CSS類名來做你想做的。

在ngShow（或ngHide）的情況下，將增加的類ng-hide，ng-hide-add，然後ng-hide-add-active啓動隱藏時轉換。當動畫完成時，它只會離開ng-hide。當您顯示時，它會刪除ng-hide並添加ng-hide-remove和ng-hide-remove-active。聽起來很複雜，但並不糟糕。這很公式化。這些州有助於順利過渡。

在我的例子中this plunk，我所做的就是包括angular.js後angular-module.js，包括我的模塊中ngAnimate。然後，我添加以下CSS來作出元素粗盲樣的動畫與選擇.fancy：

.fancy { 
    padding:10px; 
    border:1px solid black; 
    background:red; 
} 

.fancy.ng-hide-add, .fancy.ng-hide-remove { 
    -webkit-transition:all linear 5s; 
    -moz-transition:all linear 5s; 
    -o-transition:all linear 5s; 
    transition:all linear 5s; 
    display:block!important; 
} 

.fancy.ng-hide-add.ng-hide-add-active, 
.fancy.ng-hide-remove { 
    max-height: 0; 
} 

.fancy.ng-hide-add, 
.fancy.ng-hide-remove.ng-hide-remove-active { 
    max-height:100px; 
}

這種轉變僅僅是一個簡單的例子。你可能會想改善它，因爲max-height的事情有點破解。考慮使用Animate.css爲您創建一個。

不管怎麼說，CSS已經到位了，我所做的一切正常情況下都是使用ngShow，給元素fancy類，所以當顯示和隱藏時應用正確的轉換。

來源

2014-04-04 12:08:50 HackedByChinese

非常感謝你的幫助。像你這樣讓StackOverflow如此之好的人可以得到這樣的答案。 – user3284007

從jQuery遷移到AngularJS

回答

相關問題