Andrew Sala's response seems to be on point, so I decided to experiment with the plunker to explore its potential for animation.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />'); </script>
<link rel="stylesheet" href="style.css" />
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13727d74667f72613d79c7f">[email protected]</a>" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
<style>
* { transition: all 0.5s}
</style>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl',['$scope','$timeout', function($scope, $timeout) {
var mc = this;
mc.name = 'World';
mc.msg = '!';
mc.data = { pos: 250, color: 'blue', size: 100 };
$timeout(function() {
mc.msg = "bob";
mc.data = { pos: 240, color: 'yellow', size: 160 };
}, 1500);
$timeout(function() {
mc.msg = "bob is";
mc.data = { pos: 230, color: 'orange', size: 210 };
}, 2500);
$timeout(function() {
mc.msg = "bob is COMING!";
mc.data = { pos: 220, color: 'red' , size: 300};
}, 3500);
}]);
app.directive('messageChild', function($timeout) {
return {
restrict: 'E',
scope: {
stuff: '=',
msg: '@'
},
link: function(scope, element, attr) {
console.log(scope.stuff);
scope.styleVar = scope.stuff.color;
scope.pos = scope.stuff.pos;
scope.$watch('stuff', function() {
console.log(scope.stuff);
scope.pos = scope.stuff.pos;
scope.styleVar = scope.stuff.color;
scope.size = scope.stuff.size;
})
},
template: '<style> div {position: absolute; top: {{pos}}px; left: 100px; font-size: {{size}}% ; color: {{styleVar}}}</style><div>{{msg}}</div>'
};
});
</script>
</head>
<body ng-controller="MainCtrl as mc">
<p>Hello {{mc.name}}!</p>
<message-child msg="{{mc.msg}}" stuff="mc.data" >stuff</message-child>
</body>
</html>
Check out the Animated Text here
You have the option to include a style tag for each item individually or utilize ng-style. I've applied different classes for my animations, along with some inline styling for effects like glows and blurring.