div의 텍스트가 업데이트 될 때 div에 애니메이션 적용

Question

HTML, CSS 및 AngularJS 애플리케이션이 있습니다. 아래 그림과 같이
내가 텍스트를 표시 내 HTML에 div 있습니다

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

나는, 나는 내가 myScope.details를 업데이트하고 때 myDiv 애니메이션 컨트롤러 내부에서 change myScope.details 변수를 원하는

. 즉, 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를 참조하십시오.