JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.8/angular-animate.min.js"></script>
<div ng-app="myApp">
     <div ng-controller='ctrl'>
        <button ng-click='clicked()'>Click me to change class</button>  
        <div ng-class="{foo: bar}"  class='myDiv'>
        </div>
    </div>
</div>

CSS

.myDiv{
    width:400px;
    height:200px;
    background-color:red;
   -webkit-transition: 1s linear;
    /*to only change opacity*/
    /*-webkit-transition: opacity 1s linear*/
   -moz-transition: 1s linear;
   -o-transition: 1s linear;
   transition: 1s linear;
   opacity: 1;
}

.foo{
    background-color: blue;
    opacity: 0;
    Width: 0;
}

JavaScript

angular.module('myApp',['ngAnimate'])
  .controller('ctrl', function ($scope){
    $scope.bar = false;
    $scope.clicked = function(){
       $scope.bar = !($scope.bar);
    }
  });