AngularJS 图像 slider

Question

我正在使用 here 中的代码使用 Angularjs 创建图像 slider

使用 AngularJS 1.15，我可以让图像滑入。但是当第二个图像进入时，第一个图像将消失而不是滑出。有人可以帮忙吗？

注意:这不适用于 Firefox 和 IE，但适用于 Chrome。

这是我的代码HTML

<div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'">
    <div class="slider-content" ng-switch-when="1">
        <img src="asset/building.jpg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="2">
    <img src="asset/slide-2.jpg" width="100%" height="400px"/>
    </div>
<div class="slider-content" ng-switch-when="3">
    <img src="asset/slide-3.jpg" width="100%" height="400px"/>
    </div>  
<div class="slider-content" ng-switch-when="4">
    <img src="asset/slide-4.jpg" width="100%" height="400px"/>
    </div>  
    </div>

Javascript

 function slideShowController($scope, $timeout) {
 var slidesInSlideshow = 4;
 var slidesTimeIntervalInMs = 3000; 

 $scope.slideshow = 1;
 var slideTimer =
 $timeout(function interval() {
     $scope.slideshow = ($scope.slideshow % slidesInSlideshow) + 1;
     slideTimer = $timeout(interval, slidesTimeIntervalInMs);
     }, slidesTimeIntervalInMs);
 }

CSS

.imageslide{
width:100%;
height:400px;
margin: 0 auto;
margin-bottom: 20px;
}

.imageslide .slider-content {
position: absolute;
width:100%;
height:400px;
}

.animate-enter,.animate-leave {
-webkit-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-moz-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-ms-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
-o-transition:1000ms cubic-bezier(.165,.84,.44,1) all;
transition:1000ms cubic-bezier(.165,.84,.44,1) all;
}

.animate-enter {
left:100%;
}

.animate-leave.animate-leave-active {
left:-100%;
}

.animate-enter.animate-enter-active,.animate-leave {
left:0;
}

Answer 1

我发现您的骗子最大的问题是页面上缺少 ng-app 属性。添加该内容并将动画更改为使用 margin-left 后，它工作正常:

.animate-leave.animate-leave-active {
    margin-left:-100%;
}

fork 的plunkr: http://plnkr.co/edit/BxWNlYVJUCNL7C1K65aU?p=preview