title: AngularJs,Using fadeIn & fadeOut when scope data added or removed
body: <p>I have a todo list,with the js:</p>
  
  <pre><code>function todoCtrl($scope) {
  
       $scope.todos = S('todos', []);
  
       $scope.addTodo = function() {
  
          $scope.todos.unshift({
  
              text: $scope.todoText,
  
              done: false
  
          });
  
          $scope.todoText = '';
  
        }
  
        $scope.remove = function($index) {
  
          $scope.todos.splice($index, 1);
  
         }
  }
  </code></pre>
  
  <p>and the html is:</p>
  
  <pre><code>&lt;div id="scope" ng-controller="todoCtrl"&gt;
      &lt;div id="todoAdd"&gt;
      &lt;h3&gt;Todo List&lt;/h3&gt;
      &lt;form ng-submit="addTodo()"&gt;
          &lt;input class="input" ng-model="todoText"/&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;div style="margin-top:120px;" id="todolist"&gt;
      &lt;div style="width:320px;margin-left:42px;margin-top:40px;" ng-repeat="todo in todos track by $index"&gt;
          &lt;input type="checkbox" class="checkbox" ng-model="todo.done" ng-change="todochange(todo)"&gt;
          &lt;p class="todoP todo{{todo.done}}" ng-click="remove($index)"&gt;{{todo.text}}&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I add ng-animate css:</p>
  
  <pre><code>.ng-enter 
  {
      -webkit-transition: 1s;
      opacity:0;
  }
  .ng-enter-active 
  {
      opacity:1;
  }
  
  
  .ng-leave 
  {
      -webkit-transition: 1s;
  }
  .ng-leave-active 
  {
      opacity:0;
  }
  </code></pre>
  
  <p><strong>The problem is when I add or remove an item,always the last item fadeIn or fadeOut,not the element that I add or clicked.Why?Please tell me.</strong></p>