0
我用AngularJS和jQuery創建了一個動畫滑塊。滑動動畫通過點擊包含的兩個按鈕（左和右）中的一個來運行。當我嘗試從$ swipe動作觸發動畫時，動畫不起作用。
在滑動場景中，$ animate.addClass（）不會添加應該設置動畫的類。
你可以在這裏嘗試一下：http://plnkr.co/edit/oUVzHoR8kFHB3ZZAzPpQ?p=preview
首先點擊的按鈕，你會看到幻燈片動畫。然後用鼠標拖過幻燈片。在瀏覽器控制檯中，您會看到「移動它！」在動畫開始之前打印出來，但之後......沒有任何反應。你知道爲什麼嗎？
添加ng-swipe-left/-right屬性的方式。但我想要自定義滑動行爲。
下面是參考代碼：
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Test</title>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular-touch.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', ['ngAnimate', 'ngTouch']);
app.directive('sliderbox', ['$animate', '$swipe', '$log', function ($animate, $swipe, $log) {
return {
restrict: 'E',
replace: false,
link: function (scope, element, attrs) {
scope.moveLeft = function() {
move('move-left')
};
scope.moveRight = function() {
move('move-right')
};
function move(directionClass) {
$log.info("Starting moving " + directionClass);
if (directionClass != null) {
// Find child elements with the boxslide class
var slides = element.find('.boxslide');
// Get the left-most slide
var leftMostSlide = slides[0];
if ((!$(leftMostSlide).is(':animated'))) {
$log.info("Move it!");
$animate.addClass(leftMostSlide, directionClass).then(function() {
$(leftMostSlide).removeClass(directionClass);
});
}
}
}
var posX;
var posY;
$swipe.bind(element, {
'start': function (coords) {
posX = coords.x;
posY = coords.y;
},
'move': function (coords) {
},
'end': function (coords) {
var delta = coords.x - posX;
if (delta > 50) {
$log.info("Hit move right threshold");
scope.moveRight();
} else if (delta < -50) {
$log.info("Hit move left threshold");
scope.moveLeft();
}
},
'cancel': function (coords) {
// ..
}
});
}
};
}]);
app.animation('.boxslide', ['$log', function ($log) {
return {
addClass: function (element, className, done) {
var movePixels = 130; // (78px + 2 * 25px padding + 2 * 1px border)
var direction = '';
if (className === 'move-left') {
direction = '-=';
} else if (className == 'move-right') {
direction = '+=';
}
$log.info("MOVING: " + className);
element.animate({marginLeft: direction + movePixels}, 500, done);
}
}
}]);
</script>
<style>
sliderbox {
display: block;
border: 1px solid blue;
overflow: hidden;
white-space: nowrap;
}
.boxslide {
border: 1px solid gray;
background-color: #ececec;
padding: 25px;
width: 78px;
display: inline-block;
float: none;
vertical-align: top;
margin: 0;
}
</style>
</head>
<body>
<sliderbox>
<div class="boxslide">
<div>
Slide 1
</div>
</div>
<!--
This comment prevents white space between box slides
-->
<div class="boxslide">
Slide 2
</div>
<!--
This comment prevents white space between box slides
-->
<div class="boxslide">
Slide 3
</div>
</sliderbox>
<button ng-click="moveLeft()">Left</button>
<button ng-click="moveRight()">Right</button>
</body>
</html>
奇，它的工作，但視圖不更新 – SoluableNonagon
你addClass不閃光的幻燈片元素 – SoluableNonagon