CODEWITHSUNDEEP
htmlcssangularjs
User7723337
User7723337

Reputation: 12018

Animate div when text in div is updated

I have a HTML, CSS and AngularJS application.
I have a div in my html where I display some text as shown below:

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

When I change myScope.details variable from inside the controller, I want to animate myDiv when I am updating the myScope.details. In short, when the text inside the div is updated, I want the div to animate. How can this be done using HTML and CSS?

Upvotes: 1

Views: 75

Answers (1)

devqon
devqon

Reputation: 13997

I have done something similar before, this directive will work:

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");
                    });
                }
            })
        }
    }
});

And some animation in your css:

.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;}
}

See this jsfiddle for an example.

Upvotes: 2

Related Questions