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.

[sandersietses]

Workaround works, thanks.

But could you please fix this? It still exists in AngularJS 1.2.14.

I've modified your example code:
http://plnkr.co/edit/PKiOP8D4vPnVy8wNOidO

Thank you!

[Foxandxss]

@Aldentev That is going to be fixed on the next version.

[jkimvital]

This still happens in 1.2.16

[leniel]

Yep... still happening in 1.2.16. 😟

Thanks @simonykq... your workaround is nice.

[iamlothian]

duplicate issue #1273

[whitehat101]

@simonykq 👍

I refactored simonykq's solution, because I just wanted to disable ng-animate (never explicitly enable it) to get <carousel> to work. I also made the code minification safe and "optimized" the link function by dropping the unused $attrs parameter.

CoffeeScript:

app.directive 'disableNgAnimate', ['$animate', ($animate)->
  restrict: 'A'
  link: (scope, element)-> $animate.enabled false, element
]

JavaScript:

app.directive('disableNgAnimate', ['$animate', function($animate) {
  return {
    restrict: 'A',
    link: function(scope, element) {
      $animate.enabled(false, element);
    }
  };
}]);

Use:

<carousel disable-ng-animate>
  ...
</carousel>

[goodbomb]

I'm currently using Angular-Bootstrap v0.11.0 and Angular.js v1.2.19. I've tried disabling ngAnimate entirely and the workaround Directive that selectively disables ngAnimate, but I can't get the carousel to work. The slide classes don't update when they try to transition, so slide 1 has the following classes: item text-center ng-isolate-scope active left and slide 2 has item text-center ng-isolate-scope next left and it remains stuck there. Nothing changes. The prev() and next() buttons also do nothing.

[bang-dc]

@simonykq thank you!

[simonykq]

@whitehat101. Yes yours is better. Many thanks

[skusunam]

@simonykq @whitehat101 Thanks for the solution.

[davsantos]

@simonykq @whitehat101 Thanks your solution works simple and neat. I am a newbie and I don't understand what this is really doing inside the carousel and outside it. Could you give me a quick explanation? If this is not really the place to ask then please forgive me and ignore.

[raulgomis]

Thanks for the solution. but is there any update on this? will be fixed soon?

[jirihelmich]

Thanks for the workaround! This is such an annoying bug feature, very hard to find.

[JobaDiniz]

Hi, it doesn't work if I have a ng-show:

<carousel ng-show="promos.length > 1" disable-ng-animate>
        <slide ng-repeat="promo in promos">
            <img ng-if="!promo.containsUrl()" ng-src="{{promo.image}}" alt="{{promo.title}}" />
            <a ng-if="promo.containsUrl()" ng-href="{{promo.url}}" ng-click="bannerClick(promo.pid)"><img ng-src="{{promo.image}}" alt="{{promo.title}}" /></a>
        </slide>
    </carousel>

If I remove ng-show, the workaround works...
Any ideas to fix my scenario?

[iamlothian]

Wrap it in an outer div. That has the ng-show on it.
On 23/12/2014 10:56 pm, "Joberto Diniz" [email protected] wrote:

Hi, it doesn't work if I have a `ng-show´:

If I remove ng-show, the workaround works...
Any ideas to fix my scenario?

—
Reply to this email directly or view it on GitHub
#1350 (comment)
.

[JobaDiniz]

Yeah.. this works. Thanks.

[simonykq]

I think the problem may come from the priority option in $compile service. ngShow use the default one which is 0.

Try set the priority option in disable-ng-animate directive to something which is either greater or below 0 and see if this would fix the problem

[fnagel]

Thanks @simonykq for the workaround!

This really needs to be fixed.

[dmarcelino]

Thank you @simonykq, that fixed the issue I was experiencing.

BTW, I'm using:

• angularUI#0.12.0
• angular#1.3.8
• angular-animate#1.3.8

[timtim-75]

Hi there,

I'm using Angular 1.3.2, Bootstrap 3.x.

On safari, the workaround doesn't fix the issue.

The carousel is loaded, I can only click once on next/prev, then nothing else happen. Something strange, the next/prev slide is shown, but the first is still on the page.

Here is my first slide, before I click next, on the left, 99 is the ID of this picture.

And here is the second slide, after I click next, on the left, you can see the ID of this picture, but still the ID of the previous one.

Here is the directive

.directive('disableNgAnimate', ['$animate',
    function ($animate) {
        return {
            restrict: 'A',
            link: function (scope, element) {
                $animate.enabled(false, element);
            }
        };
}]);

Any idea ?

Thanks a lot

[rubenjimenez]

I think I'm suffering the same issue. In my case, when i press next or prev arrows sometimes I got the slide to change once, sometimes it doesn't event change. Same behavior in Chrome/Safari. It started to happen when I added ngAnimate to the project.

[bentleyo]

Can we add a note about this ngAnimate + ui.bootstrap incompatibility to the FAQ?
I just ran into this issue and it was a real pain to figure out. I ended up going with the fix @simonykq provided (thanks Simon!).

[markleusink]

@bentleyo Know that feeling. Just went through the same tough process :(

+1 for adding a line to the docs and mentioning the workaround (disabling ng-animate completely or only for the directive).

[altazar]

I have a similar, but different problem. When slides scroll top part of pictures disappears. This happens only in (latest) Firefox. http://kulturfokus.eu/en/projekte/aufsteinernenspuren

[ivan-abrash]

@simonykq thanks!

[gustavobigardi]

@simonykq thanks!!! I lost almost a day trying to resolve this!

[daveteply]

This can also be remedied by specifying a specific prefix when configuring your app.

angular.module('fooMod',['ngAnimate']).config(function($animateProvider) {
    $animateProvider.classNameFilter(/prefix-/);
...

We had an issue with the carousel after adding another library that required ngAnimate. This library uses CSS classes that begin with anim- so we configured our animate provider with that:

    $animateProvider.classNameFilter(/anim-/);

This tells ngAnimate to only animate classes that begin with anim-.

See https://docs.angularjs.org/api/ngAnimate 'Preventing Collisions With Third Party Libraries' for more details.

[char0n]

The work around doesn't seem to work when you are displaying carousel in $modal.
My animate provider is configured like so:

$animateProvider.classNameFilter(/(app-repeated-item)|(modal)/);
// The modal inside the definition fixes #3647

When I remove the class name filter, arrws on carousel seems to work fine.

@simonykq solutions doesn't seem to work in this scenario. It seems absurd that ui-bootstrap which is pure angular implementation of bootstrap components, doesn't work with core angular modules.

I fall-backed using native bootstrap components that works out of the box.

[Avcajaraville]

@simonykq Thanks man, save my day :)

[edrpls]

Hi, I've used the disableNgAnimate but in my case the carousel directive is only toggling the 'active' class, not adding/removing the others used for animation, this means the slides only toggle but do not animate.

I'm using "angular": "^1.3.0" with "angular-bootstrap": "~0.13.0".

Any ideas how to fix this?

EDIT: Nevermind, I found that I was using 1.4 and it's still not supported by angular-ui. Rolled back to 1.3.16 and everything is working again.

[MastroPino]

@simonykq
thanks, it worked!

[sauminkirve]

@simonykq,

Thanks a lot man... great job. it works.