JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://code.angularjs.org/0.10.6/angular-0.10.6.js"></script>

<div ng:app="anim" ng:controller="AnimCtrl">
  <form ng:submit="addMessage(message)">
    <input ng:model="message">
    <button>add</button>
  </form>

  <ul>
    <li ng:repeat="message in messages" class="message" animate="in">
      {{message}}
    </li>
  </ul>
</div>

CSS

.message {
    opacity: 0;
    -moz-transition: all 2s;
    -webkit-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}

.in {
    opacity: 100;
}

JavaScript

animApp = angular.module('anim', []);

animApp.run(function($rootScope) {
    $rootScope.AnimCtrl = function() {
        this.messages = [];
        this.addMessage = function() {
            this.messages.push(this.message);
            this.message = '';
        }
    }
});

angular.directive('animate', ['$value', '$defer', function(value, $defer) {
  return function(element) {
    $defer(function() {
      element.addClass(value);
    });
  }
}]);