title: angular ngShow animation not working
body: <p>this is from angularjs example</p>
  
  <p><a href="https://docs.angularjs.org/api/ng/directive/ngShow" rel="nofollow">https://docs.angularjs.org/api/ng/directive/ngShow</a></p>
  
  <p>I put everything in my local</p>
  
  <p>why is not working on my local ?</p>
  
  <p>what did I miss ?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html xmlns:ng="http://angularjs.org" ng-app="animateApp"&gt;
    &lt;head&gt;
  </code></pre>
  
  <p>
   SKIPPED THE STYLE PART.. SINCE IT'S TOO LONG<br>
  </p>
  
  <pre><code>  &lt;script src="http://code.angularjs.org/1.2.15/angular.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.angularjs.org/1.2.15/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        angular.module('animateApp', ['ngAnimate']);
        var thumbsUp = element(by.css('span.glyphicon-thumbs-up'));
        var thumbsDown = element(by.css('span.glyphicon-thumbs-down'));
  
        it('should check ng-show / ng-hide', function() {
            expect(thumbsUp.isDisplayed()).toBeFalsy();
            expect(thumbsDown.isDisplayed()).toBeTruthy();
  
            element(by.model('checked')).click();
  
            expect(thumbsUp.isDisplayed()).toBeTruthy();
            expect(thumbsDown.isDisplayed()).toBeFalsy();
        });
  
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h2&gt;Animation - Animate&lt;/h2&gt;
  
  Click me: &lt;input type="checkbox" ng-model="checked"&gt;&lt;br/&gt;
  &lt;div&gt;
      Show:
      &lt;div class="check-element animate-show" ng-show="checked"&gt;
          &lt;span class="glyphicon glyphicon-thumbs-up"&gt;&lt;/span&gt; I show up when your checkbox is checked.
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
      Hide:
      &lt;div class="check-element animate-show" ng-hide="checked"&gt;
          &lt;span class="glyphicon glyphicon-thumbs-down"&gt;&lt;/span&gt; I hide when your checkbox is checked.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>          .animate-show {
            line-height:20px;
            opacity:1;
            padding:10px;
            border:1px solid black;
            background:white;
        }
  
        .animate-show.ng-hide-add,
        .animate-show.ng-hide-remove {
            display:block!important;
        }
  
        .animate-show.ng-hide-add.ng-hide-add-active,
        .animate-show.ng-hide-remove.ng-hide-remove-active {
            -webkit-transition:all linear 0.5s;
            transition:all linear 0.5s;
        }
  
        .animate-show.ng-hide {
            line-height:0;
            opacity:0;
            padding:0 10px;
        }
  
        .check-element {
            padding:10px;
            border:1px solid black;
            background:white;
        }
  </code></pre>