title: AngularJS fade-in div element when requirement is met with ng-show
body: <p>I would like this fade class div to show on the page with a slow fade-in effect when the ng-show requirement has been met. In jQuery I could do this in a jiffy but it's proving difficult in Angular due to lack of working examples. Here is the working code:</p>
  
  <p>Here is the <code>index.html</code>:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="app"&gt;
  &lt;head&gt;
      &lt;link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"&gt;&lt;/script&gt;
      &lt;script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainCtrl" class="container" style="padding-top:30px"&gt;
      &lt;user-info-card&gt;&lt;/user-info-card&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the <code>script.js</code>:</p>
  
  <pre><code>angular.module('app', []);
  angular.module('app').controller('mainCtrl', function($scope) {
      $scope.user = {
          name: 'Luke Skywalker',
          address: {
            street: 'PO Box 123',
            city: 'Secret Rebel Base',
            planet: 'Yavin 4'
          },
          friends: [
          'Han',
          'Leia',
          'Chewbacca'
          ],
          rank: 'scout',
          score: 27
      } 
  });
  angular.module('app').directive('userInfoCard', function() {
      return {
          templateUrl: "userInfoCard.html",
          restrict: "E",
          controller: function($scope) {
              $scope.knightMe = function(user) {
                  if (user.score &gt; 25) {
                    user.rank = 'miner';
                  }
              }
          }
      }
  })
  </code></pre>
  
  <p>Here is the template file <code>userInfoCard.html</code> loaded by the directive:</p>
  
  <pre><code>&lt;div class="panel panel-primary"&gt;
      &lt;div class="panel-heading"&gt;{{user.name}}&lt;/div&gt;
      &lt;div class="panel-body"&gt;
          &lt;div ng-show='!!user.address'&gt;
              &lt;h4&gt;Address:&lt;/h4&gt;
              {{user.address.street}} &lt;br /&gt;
              {{user.address.city}}&lt;br /&gt;
              {{user.address.planet}}
          &lt;/div&gt; &lt;br /&gt; 
  
          &lt;h4&gt;Friends:&lt;/h4&gt;
          &lt;ul&gt;
              &lt;li ng-repeat='friend in user.friends'&gt;
                  {{friend}}
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div&gt;
              Rank: {{user.rank}}
          &lt;/div&gt;&lt;br&gt;
          &lt;div ng-show="user.score &gt;= 25" ng-class="ng-show" class="fade"&gt;
              &lt;span&gt;Congratulations, you have the ranked up! Click the button below to claim your new rank now.&lt;/span&gt;&lt;br /&gt;
              &lt;button class="btn btn-success" ng-click="knightMe(user)"&gt;Knight Me&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And last but not least, the <code>style.css</code>:</p>
  
  <pre><code>.fade.ng-hide {
      opacity: 0;
  }
  .fade.ng-show {
      transition: 0.5s linear all;
      opacity: 1;
  }
  </code></pre>
  
  <p>So in a nutshell, when the user score is more than 25, which it is in this case, I would like that fade class div to load in a gentle fade-in fashion. It's loading now fine but I'm not sure how to add the effect. Thanks for your time.</p>