Carousel strange transition [bootstrap 3]

[djordje]

I've made video that show behaviour (angular 1.2.3).

https://dl.dropboxusercontent.com/u/21598387/AngularUI_Bootstrap3_carousel.mov

[pkozlowski-opensource]

@djordje what is the version of this library that you are using? Please note that BS3 support is only available in the development branch (bootstrap3).

[djordje]

Latest bootstrap3 branch - d7c69d4

[sudhakar]

Yep. I can confirm this behaviour. It happens only when ngAnimate module is loaded. Tested with angular 1.2.3 & bootstrap3 d7c69d4.

[AttilaSATAN]

I can confirm that its about ngAnimate. (bs3, angular 1.2.0)

[djordje]

I found work around: http://plnkr.co/edit/8HfZCaTOIeAesKVFSFpj?p=preview

[AttilaSATAN]

@djordje ty very much it realy saves so much of my time.

[simonykq]

First to create a directive as following :

app.directive('disableAnimation', function($animate){
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs){
            $attrs.$observe('disableAnimation', function(value){
                $animate.enabled(!value, $element);
            });
        }
    }
});

Given that your app have already declared 'ngAnimate' as dependency. Then, create the following HTML code, and it should work

<carousel interval="5000" disable-animation="true">
  <slide ng-repeat="slide in slides">
    <img ng-src="{{slide.image}}" width="1000" height="300" style="margin:auto;">
  </slide>
</carousel>

@djordje

[pkozlowski-opensource]

Hmm, seems like this is still a problem with the latest release of AngularJS:
http://plnkr.co/edit/Xl5Ok6UOJFAuZyTxO39F?p=preview

[eliranmal]

@djordje - great workaround, thanks a lot.