title: Why the `div` which I add the `class` `.display_none` is not hide？
body: <p>I want to set the light gray div to small and the red div to big, and 1 second after, the small div is hidden.</p>
  
  <p>This is my code: </p>
  
  <pre><code>   &lt;style&gt;
  
          div {
              margin: 50px auto;
              width: 50px;
              height: 50px;
              background-color: lightblue;
          }
          .base-class {
              transition:all cubic-bezier(0.250, 0.001, 0.990, 0.990) 1s;
          }
          .content-love {
              display: block;
              width: 16px;
              height: 14px;
              float: right;
              margin-top: 10px;
              margin-right: 6px;
              background-color: red;
              background-position: center;
              background-repeat: no-repeat;
              background-size: contain;
          }
  
          .content-like {
              display: block;
              width: 16px;
              height: 14px;
              float: right;
              margin-top: 10px;
              margin-right: 6px;
              background-color: lightgray;
              background-position: center;
              background-repeat: no-repeat;
              background-size: contain;
          }
          .animate_display {
              width: 116px;
              height: 114px;
          }
  
          div.display_none {
              display: none;
          }
  
      &lt;/style&gt;
      &lt;script src="angular.js"&gt;&lt;/script&gt;
  
  &lt;body ng-app="app" ng-controller="xxx"&gt;
  
  &lt;div  class="content-love base-class" ng-click="likeFun($index)"  ng-class="{animate_display:liked,display_none:!displayHH}" &gt; &lt;/div&gt;
  
  &lt;div class="content-like base-class" ng-click="likeFun($index)" ng-class="{animate_display:!liked,display_none:displayHH}" &gt; &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;script&gt;
       var app  = angular.module('app',[]);
      var controller1 = app.controller('xxx',['$scope', function ($scope) {
          $scope.liked = false;
          $scope.displayHH = false;
          $scope.likeFun = function (index) {
              $scope.liked = !$scope.liked;
              $scope.displayNoneFun();
          }
          $scope.displayNoneFun = function () {
              var timer = $interval(function () {
                  $scope.displayHH = !$scope.displayHH;
              },1000);
              $interval.cancel(timer);
          }
  
      }]);
  &lt;/script&gt;
  </code></pre>
  
  <p>Now, if I click the div, the size of div will change, and 1 second later  I need to hide the smaller div.
  The problem is the small div is not hidden. </p>