div内のテキストが更新されるときにアニメーションdiv

Question

私はHTML、CSS、AngularJSアプリケーションを持っています。
私は下図のように、私はいくつかのテキストを表示する私のhtmlでdivを持っている：

<div id='myDiv'>{{myScope.details}}</div>

私は、コントローラの内部からchange myScope.details変数が、私はmyScope.detailsを更新していたときにmyDivをアニメーション化するとき。つまり、div内のテキストが更新されると、divをアニメーション化します。これはHTMLとCSSを使ってどのようにすることができますか？

app.directive("animateOnChange", function($timeout) { 
    return { 
     restrict: "A", 
     link: function (scope, element, attr) { 
      element.addClass('animate-change'); 
      scope.$watch(attr.animateOnChange, function(newvalue, oldvalue) { 
       if (newvalue != oldvalue) { 
        element.removeClass("changed"); 
        $timeout(function() { 
         element.addClass("changed"); 
        }); 
       } 
      }) 
     } 
    } 
}); 

をそして、あなたのCSSのいくつかのアニメーション：

Answer 1

私が前に似た何かを行っている、このディレクティブは動作します

.changed { 
    -webkit-animation: highlight-fade 1s ease-in 1; 
    animation: highlight-fade 1s ease-in 1; 
} 

@-webkit-keyframes highlight-fade { 
    0% {border: 3px solid yellow;} 
    100% {border: 3px solid transparent;} 
} 
@keyframes highlight-fade { 
    0% {border: 3px solid yellow;} 
    100% {border: 3px solid transparent;} 
} 

は、例えばthis jsfiddleを参照してください。