AngularJS綁定值更改時觸發ng-012動畫

Question

我有一個指令，其中一些內容通過ng-html-bind-unsafe綁定。我喜歡在內容發生變化時進行轉換。我可以使用jquery淡出它，更改內容值並將其淡入。

AngularJS有更優雅的方式嗎？

Answer 1

在angular 1.2.0中，您可以使用指令來監視內容更改並添加，然後刪除這些類。您可以將動畫綁定到這些類添加，並將其刪除，從而觸發您正在尋找的褪色效果。

module.directive('contentChange', function(){ 

return { 

    scope: { 
    content: '=' 
    }, 

    template: '<span ng-bind-html="myContent"></span>', 

    link: function(scope, element, attrs){ 
    scope.$watch('content', function(){ 

    //add fader class to element 

    scope.myContent = content; 

    //remove fader class from element 
    }); 
    }; 
}); 

這裏有1.2動畫的熱門文章：http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

Answer 2

刻意突出數據綁定過程中的文字時，我遇到了類似的問題。我的目標是突出顯示爲時尚用戶界面更改的文本。從用戶界面的角度來看，這可以確保用戶在填寫表單時知道正在更改哪些內容。

這是我學到（我連着低於fiddle）

首先，你不想使用手錶。這將在ng-class上創建一個令人不愉快的true :: false循環，因此不會輸出乾淨的轉換。

其次，你不能想到角度作爲jQuery的地方，你找到一個元素，並改變它。角度的關鍵是可重用性，這是我最初的嘗試嚴重缺乏的。

第三，事件如ng-focus，ng-blur，ng-click，（...以及更多）是獲得我想要的結果的麪包和黃油。

我的解決方案是使用NG對焦和NG-模糊檢測當輸入正在編輯

<input ng-focus="highlight('name')" ng-blur="doneHighlight('name')" 
ng-model="user.name" /> 

在NG-焦點我打電話的一大亮點功能，並通過一個參數叫做「名」 。這個論點是可重用性的關鍵。

$scope.highlight = function(className){ 
    $scope.toggle = className; 
} 

一旦通過，toggle等於參數。

這裏的踢球者...

<div ng-class="{'toggle': toggle=='name', 'noToggle': toggle=='name'+false}"> 
    {{user.name}} 
</div> 

當撥動被==傳遞的參數，然後當它被==爲「名」應用亮點+假「noToggle」級被施以流暢的高光動畫。

等等... ng-blur怎麼樣？我很高興你問了！ ng-blur調用'doneHighlight'函數並傳遞相同的類參數。

$scope.doneHighlight = function(className){ 
    $scope.toggle = className + false; 
} 

但是，傳遞參數時，它也會在類名的末尾附加一個假值。這是一種與jQuery不同的思維方式，但允許我根據需要在控制器中重用盡可能多的元素;

希望這有助於！我很高興回答任何進一步的問題。

http://jsfiddle.net/bebold/8MAKT/1

Answer 3

我認爲有涉及比包括ngAnimate其他沒有新的JS代碼更好的方法。

拿這個例子：

<span class="my-example value-{{myValue}}">{{myValue}}</span> 

通過設置使用值類，我可以使用ngAnimate能力類的變化。

在我的SCSS（或更少），我會寫：

span.my-example{ 
    display: inline-block; 
    padding: 0 3px; 
    background-color: white; 
    transition: background-color 0.26s linear 0s; 
    &[class*="-add"] { 
     background-color: yellow; 
    } 
} 

瞧！如果ngAnimate自動添加並刪除「value-2-add」，「value-10-add」等類，則每次值變化時，背景顏色都會變爲黃色並返回。