Angular 1.2：动画模型改变/输入新的，留下旧的

Question

当模型的值发生变化时，我正在试图制作动画。取决于新值大或小，然后动画应改变其方向。

但主要是我在旧的价值逐渐消失和新的消退之后。

app.directive('animateValue', function($animate) {
    return {
        scope: {
            value: '='
        },
        link: function(scope, element, attr) {

          // set up container for old and new elements
          var newElement = angular.element('<div class="new">new</div>');
          var oldElement = angular.element('<div class="old">old</div>');

          // append them to the element
          element.append(newElement)
          element.append(oldElement);

          scope.$watch('value', function(newval, oldval) {

            // fill elements with new content
            oldElement.text(oldval)
            newElement.text(newval);

            // whatever happens – old value should leave, new should enter
            $animate.leave(oldElement)
            $animate.enter(newElement, element);

            // set class depending on direction
            if (newval > oldval) {
              $animate.setClass(element, 'ani-up', 'ani-down');
            } else {
              $animate.setClass(element, 'ani-down', 'ani-up');
            }

          });
        }
    };
});

我还设置了一个plunkr：http://plnkr.co/edit/gm1Sk7kPo2yrN9UZCslP

不幸的是，我不知道如何淡出旧价值。我为此设置的元素根本没有出现......