Javascript 角度ui引导旋转木马中无过渡

我在这里重复使用了基于角度的旋转木马：

标记：

<div ng-app="MyApp">
  <div ng-controller="CarouselDemoCtrl">
    <div style="height: 305px">
      <uib-carousel interval="myInterval" no-wrap="noWrapSlides">
        <uib-slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.image}}" style="margin:auto;">
          <div class="carousel-caption">
            <h4>Slide {{$index}}</h4>
            <p>{{slide.text}}</p>
          </div>
        </uib-slide>
      </uib-carousel>
    </div>
  </div>
</div>

幻灯片{{$index}
{{slide.text}

控制器：

 angular.module('MyApp', ['ui.bootstrap'])
  .controller('CarouselDemoCtrl', function ($scope) {
  $scope.myInterval = 5000;
  $scope.noWrapSlides = false;
  var slides = $scope.slides = [];
  $scope.addSlide = function() {
    var newWidth = 1000 + slides.length + 1;
    slides.push({
      image: '//placekitten.com/' + newWidth + '/300',
      text: ['More','Extra','Lots of','Surplus'][slides.length % 4] + ' ' +
        ['Cats', 'Kittys', 'Felines', 'Cutes'][slides.length % 4]
    });
  };
  for (var i=0; i<4; i++) {
    $scope.addSlide();
  }
});

angular.module（'MyApp'，['ui.bootstrap']））
.controller（'carousedemoctrl'，函数（$scope）{
$scope.myInterval=5000；
$scope.noWrapSlides=false；
var slides=$scope.slides=[]；
$scope.addSlide=函数（）{
var newWidth=1000+张幻灯片。长度+1；
推({
图片：'//placekitten.com/'+newWidth+'/300'，
文本：['More'、'Extra'、'Lots's'、'盈余][slides.length%4]+'+
[‘猫’、‘小猫’、‘猫’、‘可爱’][slides.length%4]
});
};
对于（var i=0；i您缺少ng animate依赖项

angular.module（'MyApp'，['ngAnimate'，'ui.bootstrap']）

如果您使用的是bower，那么只需使用

bower安装角度动画

或者使用npm

npm安装角度动画

并将js包含在您的
index.html