我已经在 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 的方式。
根据滑动方向(或单击哪个按钮)实现不同动画的更好方法是什么?