Различные анимации пролистывания в зависимости от направления пролистывания в AngularJS

Question

Я создал действительно базовую версию того, что у меня есть, в JSFiddle, которую можно найти здесь: http://jsfiddle.net/hamchapman/a97Yq/5/

Это код на случай, если JSFiddle не работает:

// ** view **

<div class="container" ng-controller="AdminCtrl">
    <div class="tweet-list">
        <div class="tweet" ng-repeat="tweet in tweets" ng-class="{ 'swipe-left': $index == activeIndexLeft, 'swipe-right': $index == activeIndexRight }">
            <div ng-swipe-right="discardTweet(tweet, $index)" ng-swipe-left="verifyTweet(tweet, $index)">{{tweet.text}}</div>
            <button ng-click="verifyTweet(tweet, $index)" type="button">Show Tweet</button>
            <button ng-click="discardTweet(tweet, $index)" type="button">Discard Tweet</button>
        </div>
    </div>
</div>

// ** style **

.swipe-left.ng-leave, .swipe-right.ng-leave {
    -webkit-transition: 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000) all;
    -moz-transition: 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000) all;
    -ms-transition: 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000) all;
    -o-transition: 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000) all;
    transition: 500ms cubic-bezier(0.420, 0.000, 1.000, 1.000) all;
}
.swipe-left.ng-leave {
    left: 0;
}
.swipe-left.ng-leave.ng-leave-active {
    position: absolute;
    left: -100%;
}
.swipe-right.ng-leave {
    left: 0;
}
.swipe-right.ng-leave.ng-leave-active {
    position: absolute;
    left: 100%;
}

// ** angular **

var myApp = angular.module('myApp', ['ngAnimate',]);

function AdminCtrl($scope) {
    $scope.activeIndexLeft = -1;
    $scope.activeIndexRight = -1;
    $scope.tweets = [{
        text: "tester"
    }, {
        text: "tester 2"
    }, {
        text: "tester 3"
    }, {
        text: "tester 4"
    }, {
        text: "tester 5"
    }, {
        text: "tester 6"
    }];

    $scope.verifyTweet = function (tweet, $index) {
        $scope.activeIndexLeft = $index;
        var i = $scope.tweets.indexOf(tweet);
        if (i != -1) {
            $scope.tweets.splice(i, 1);
        }
    };

    $scope.discardTweet = function (tweet, $index) {
        $scope.activeIndexRight = $index;
        var i = $scope.tweets.indexOf(tweet);
        if (i != -1) {
            $scope.tweets.splice(i, 1);
        }
    }
};

Вы можете видеть, что это похоже на довольно взломанный метод, и он тоже не работает идеально. Никакая анимация не происходит при первом щелчке (или пролистывании) элемента по заданному индексу (поскольку класс смахивания влево / вправо применяется только при нажатии (или пролистывании).

Как правило, это довольно глючно, и это не похоже на способ сделать это с помощью Angular.

Каков лучший способ достижения различных анимаций в зависимости от направления пролистывания (или какая кнопка нажата)?