I would like to have a `ng-if` javascript-based animation that animates elements leaving. However, if the boolean controlling `ng-if` changes back to `true` before the element has left the DOM, I would like for the existing element to be re-used, rather than a new one created.

The issue can be seen using a simple animation that doesn't actually do anything but take up time:

```
app.animation('.toggle', function($window) {
  return {
    leave: function(element, done) {
      $window.setTimeout(done, 2000);
    }
  };
});

```

with HTML like

```
<button ng-click="toggle = !toggle">Toggle me a lot!</button>
<p ng-if="toggle" class="toggle">Should only ever be one of these</p>

```

If you can the `ng-if` condition on an element with the class `toggle` multiple times in quick succession, then several of them end up in the DOM. Is it possible to only have at most one of them in the DOM at any one time? 

My reason is that it feels more expected (at least for me) for the element that is already on screen to react to changes in state, from its current position in animation, rather than a new one created as though the previous one had fully disappeared. My actual use case is using Angular UI router views, where moving back/forwards between states causes the same template to be in the DOM multiple times, but I'm hoping that answers to this question may inspire solutions to the more complicated routing case.

I realise I can use ng-hide or ng-class, but I would like for the element to be removed from the DOM at the end of the animation. This would also (hopefully) make the answer to this question more similar to the UI routing case, as ui-view behaves more like ng-if in it is added/removed to the DOM on state change.

You can see the above example at <http://plnkr.co/edit/hvEshhqOiC31q9wSjtL1?p=preview>