Jquery AngularJS$animate addClass从$swipe操作启动时不工作
我用AngularJS和jQuery创建了一个动画滑块。滑动动画通过单击我包括的左右两个按钮中的一个来运行。当我试图从$swipe动作中触发动画时，动画不起作用 在滑动场景中，$animate.addClass不添加应该触发动画的类 您可以在这里尝试： 首先点击按钮，你会看到幻灯片动画。然后用鼠标拖动幻灯片。在浏览器控制台中，您将看到“移动它！”在动画开始前打印，但是。。。什么也没发生。你知道为什么吗 顺便说一句，添加ng swipe left/-right属性很有效。但是我想要定制的滑动行为 以下是代码供参考：Jquery AngularJS$animate addClass从$swipe操作启动时不工作,jquery,angularjs,jquery-animate,swipe,Jquery,Angularjs,Jquery Animate,Swipe,我用AngularJS和jQuery创建了一个动画滑块。滑动动画通过单击我包括的左右两个按钮中的一个来运行。当我试图从$swipe动作中触发动画时，动画不起作用 在滑动场景中，$animate.addClass不添加应该触发动画的类 您可以在这里尝试： 首先点击按钮，你会看到幻灯片动画。然后用鼠标拖动幻灯片。在浏览器控制台中，您将看到“移动它！”在动画开始前打印，但是。。。什么也没发生。你知道为什么吗 顺便说一句，添加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>
啊。当然，这是一个范围问题。当我使用$scope.$apply时，它会起作用。我仍在试图了解Angular的作用域和异步事件，但下面更新的“end:”函数现在可以工作了 更新的plunker：
奇怪的是，它确实可以工作，但视图不更新您的addClass从不为幻灯片上的元素激发
'end': function (coords) {
var delta = coords.x - posX;
if (delta > 50) {
$log.info("Hit move right threshold");
scope.$apply(function(){
scope.moveRight();
});
} else if (delta < -50) {
$log.info("Hit move left threshold");
scope.$apply(function(){
scope.moveLeft();
});
}
},