Javascript ngSrc指令中带有ngAnimate的滑块动画
我有一些这样的代码 所以我想做一个这样的动画 但是我已经看到ng animate不适用于ng src,所以我想使用ng show和watch事件来设置布尔变量,但我不能这样做Javascript ngSrc指令中带有ngAnimate的滑块动画,javascript,angularjs,animation,ng-animate,Javascript,Angularjs,Animation,Ng Animate,我有一些这样的代码 所以我想做一个这样的动画 但是我已经看到ng animate不适用于ng src,所以我想使用ng show和watch事件来设置布尔变量,但我不能这样做 任何人都可以给我一些建议吗?最佳做法是为滑块制定指令,但您可以这样做。它缺少一些代码,但这是您应该采用的方法 在html中: <div id="image-slider" ng-style="sliderStyle"> <div class="image" ng-repeat="(key, sou
任何人都可以给我一些建议吗?最佳做法是为滑块制定指令,但您可以这样做。它缺少一些代码,但这是您应该采用的方法 在html中:
<div id="image-slider" ng-style="sliderStyle">
<div class="image" ng-repeat="(key, source) in imagesServingUrl track by $index" ng-style="imgStyle">
<img class="productImage" ng-src="{{source.serving_url}}" ng-class="{'hideImg':(current!=key), 'showImg':(current==key)}" />
<span class="arrow-right" ng-click="next(current+1)"/>
<span class="arrow-left" ng-click="prev(current-1)"/>
</div>
</div>
在你的控制器里
$scope.next = function(next) {
$scope.current = next;
$scope.percent -= 100;
return $scope.imgStyle = {
transform: 'translateX(' + $scope.percent + '%)',
width: $scope.sliderWidth,
height: $scope.sliderHeight
};
};
$scope.next = function(next) {
$scope.current = next;
$scope.percent -= 100;
return $scope.imgStyle = {
transform: 'translateX(' + $scope.percent + '%)',
width: $scope.sliderWidth,
height: $scope.sliderHeight
};
};