title: Angular 1.2.x ng-hide and ng-show css transition
body: <p>I have read the various docs and how-to sites on this, but no matter what I do, I cannot get a div being shown to show a css transition.</p>
  
  <pre><code>&lt;div class="row reveal-animation" ng-show="partneradd.showEntitlements"&gt;
    &lt;div class="col-md-6"&gt;
      &lt;fieldset&gt;
        &lt;legend&gt;Entitlements&lt;/legend&gt;
        stuff
      &lt;/fieldset&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where the ng-show value is a boolean that is toggled to true by a button on the page.  This works fine.  But no transition.  </p>
  
  <p>Following some code found on the angular site, I am using this in my sass:</p>
  
  <pre><code>.reveal-animation.ng-enter {
    -webkit-transition: 2s linear all;
     transition: 2s linear all;
     opacity: 0;
   }
  
  .reveal-animation.ng-enter.ng-enter-active {
    opacity: 1;
  }
  </code></pre>
  
  <p>But nothing.  What did I do wrong here?</p>
  
  <p>Edit:  I have indeed loaded the ng-animate module and injected it into my app.js</p>