title: Transition animation does not work in Angular
body: <p>Could you please take a look at code snippets and let me know why the animation does not work, for example no opacity change and no background colour change. Please note that the  code is entirely taken from a book so I am really confused how it cannot work.</p>
  
  <p>Please not that css file, angular-animate are included in html</p>
  
  <pre><code> &lt;link rel="stylesheet" href="css/simple.css"/&gt;
    &lt;script src="lib/angular/angular-animate.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The body of html:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div ng-init="isShown=true"&gt;
          &lt;input type="checkbox" ng-model="isShown" /&gt;Show
          &lt;div ng-class="my-animation-class" ng-if="isShown"&gt;
          &lt;h3&gt;Enter/Leave Animation&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><code>  .my-animation-class.ng-enter {
    -webkit-transition: 0.5s linear all;
    -o-transition: 0.5s linear all;
    -moz-transition: 0.5s linear all;
    opacity: 0;
    background: green;
    }
  
    .my-animation-class.ng-enter.ng-enter-active {
    opacity: 1;
    }
  </code></pre>
  
  <p>And please also note that ngAnimate is there as dependency in app.js</p>
  
  <p>Please help! Thank you beforehand!Let me know if there are any questions.</p>