Ich erstelle einen Bildschieber mit Angularjs unter Verwendung der Codes vonHier

Mit AngularJS 1.15 könnte ich das Bild einschieben. Wenn das zweite Bild eintritt, verschwindet das erste Bild, anstatt herauszurutschen. Kann jemand helfen?

HINWEIS: Dies funktioniert nicht in Firefox und IE, aber in Chrome.

Hier sind meine Codes 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;
}