角度 ui 引导轮播中没有过渡答案

【问题标题】：No transition in angular ui bootstrap carousel角度 ui 引导轮播中没有过渡
【发布时间】：2015-11-08 18:32:20
【问题描述】：

我在这里重新使用了基于角度的轮播： http://codepen.io/hamzaisaac/pen/avaVYK

标记：

<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>

控制器：

 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();
  }
});

可以，但是我无法在原代码中实现同样的过渡效果： https://angular-ui.github.io/bootstrap/#carousel

为什么？我已经包含了所有依赖项，包括 Angularjs 和 UI Bootstrap。这里有什么我错过的吗？

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

您缺少 ng-animate 依赖项。

angular.module('MyApp', ['ngAnimate', 'ui.bootstrap'])

如果您使用的是 bower，那么只需使用安装依赖项

bower install angular-animate

或者使用 npm

npm install angular-animate

并在您的index.html 中包含 js

<script src="/path/to/angular-animate/angular-animate.js"></script>

【讨论】：