ui bootstrap carousel animation angular 1.2.* issues

[autumn01]

the new implementation of ng-animate seems to be interfering with the animation for the carousel slider directive.

<div ng-class="{
    'active': leaving || (active && !entering),
    'prev': (next || active) && direction=='prev',
    'next': (next || active) && direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="item ng-scope ng-isolate-scope ng-animate ng-enter ng-animate-start ng-animate-active ng-enter-active next left" ng-transclude="" ng-repeat="slide in slides" active="slide.active" style="-webkit-transition-property: left, clip; -webkit-transition-duration: 0.6s, 0.6s; ">
...
</div>

note the extra classes. On my end this is causing flickering and

here is a coded example to explain the result http://jsfiddle.net/XxPzW/

I am trying to look into weather there is a way to disable ng-animate for a singe directive, I haven't found anything yet.

EDIT: This account is no longer used i now go by @iamlothian.

EDIT: http://plnkr.co/edit/UWDcnJ2PGZd474D5SuoS?p=preview (work around)

.directive('setNgAnimate', ['$animate', function ($animate) {
    return {
        link: function ($scope, $element, $attrs) {
            $scope.$watch( function() {
                return $scope.$eval($attrs.setNgAnimate, $scope);
            }, function(valnew, valold){
                console.log('Directive animation Enabled: ' + valnew);
                $animate.enabled(!!valnew, $element);
            });
        }
    };
}]);

Used like this:

<div ng-controller="SomeController" set-ng-animate="false">
    <carousel interval="myInterval">
        <slide ng-repeat="slideCollection in groupedSlides" active="slide.active">
            <div>
                <img ng-src="{{slideCollection.image1.image}}" style="margin:auto;">
                <img ng-src="{{slideCollection.image2.image}}" style="margin:auto;">
            </div>
        </slide>
    </carousel>
</div>

[autumn01]

Until the directive is upgraded to use angular's ng-animation the directive should run

$animate.enabled(false, directiveElement);

to disable angular from allying it's own animation classes.

Here is an implementation that should work, but requires the ngAnimate module. Currently angular 1.2.1 is failing to honor this request. So that may be the cause of this issue in the first place.

http://plnkr.co/edit/UWDcnJ2PGZd474D5SuoS?p=preview (FIXED)

[pkozlowski-opensource]

I've just tested with AngularJS 1.2.2 and things seem to be in order. Feel free to re-open the issue if needed (but please provide a reproduce scenario in plunker, jsFiddle is a pain to work with...).

[iandotkelly]

+1 - I'm seeing exactly the same issue, using the same versions of angular, angular-bootstrap and bootstrap css.

[gavares]

+1 same issue

angular 1.2.2
angular-boostrap 0.7.0

[wsmidt]

+1 for me as well.

[autumn01]

Updated to 1.2.3 still the same issues: http://plnkr.co/edit/UWDcnJ2PGZd474D5SuoS?p=preview (FIXED)

I have been talking with @matsko about it. He has said the $animate.enabled(false, directiveElement); need to be on the parent of the animation.

I believe we are close now. It seams to be working if you enable and then disable the animations again after load. As ng animate disables all animation on load and then enables again when angular is fully initialized i believe setting the disable flag on an element is overridden when the global animations are turned back on.

Currently the docs (http://docs.angularjs.org/api/ngAnimate.$animate) doesn't list any method for watching the state of this.

[autumn01]

This is in progress to be fixed by angular 1.2.4 but will still require the directive to include the ngAnimate module and disable or for an external directive like the one in my example to be use to disable it until the code is re factored to use ngAnimate.

At this time i an unable to help with this effort. Maybe soon i can lean a hand.

[matsko]

Can you guys provide an extra plunkr or two which is different from the one mentioned by @autumn01?

[matsko]

@autumn01's code had a tiny snag that was causing the animation flag not to be set (or removed) on bootstrap. So based on his example it isn't really as issue. But it also looks like others in this commit still have an issue with this. If so please provide an extra plunkr example or open an issue in the AngularJS core.

Thanks everyone.

[autumn01]

The sang (oops) is now resolved in my example: http://plnkr.co/edit/UWDcnJ2PGZd474D5SuoS?p=preview

So the issue here is no longer related to angular js but to the implementation of the current carousel directive. In my example if you remove the set-ng-animate="$parent.animate" attribute on line 47. You will see how the angular animation are interfering with UI bootstrap carousel transitions.

[iandotkelly]

@matsko - this was my plunkr : http://plnkr.co/edit/Nqromw15crxowNqGlYBI

It's a lot simpler than @autumn01's example and still exhibits strange behavior that I did not see with 1.2.0-rc.3 ... I'm quite prepared to be told I"m doing something stupid though.

[matsko]

@iandotkelly thank you for sending the link. However, I am posting in this thread form angular.js. I'm actually not familiar with ui-bootstrap, I just wanted to know if $animate was causing any issues. Looks like $animate is still a work in progress with ui-bootstrap.

[iandotkelly]

@matsko - thanks

[autumn01]

@iandotkelly
Till the UI bootstrap project is re-factored here is a simplified fix http://plnkr.co/edit/8HfZCaTOIeAesKVFSFpj?p=preview

@pkozlowski-opensource
This issue only happens when ngAnimate is included, so using $injector.has() (starting from AngularJS 1.1.5) to check for the existence of ngAnimate and then disabling animations for affected elements or directives might be the way to go.

[iandotkelly]

Thanks @autumn01

[MrOrz]

Thanks alot @autumn01 !
I've created a directive named disableNgAnimate by referring to your setNgAnimate, and it worked like a charm.
I also agree that it is really necessary to refactor carousel a bit in order to take $animate into consideration.

[intellix]

+1, came here with this: http://plnkr.co/edit/OWOqmVJnf4MyjA601zWC?p=info

[matsko]

@intellix doesn't look like it's working.

[dcartertwo]

+1 seeing this issue with angular-ui bootstrap 0.9.0 and angular-animate 1.2.8

[mvhecke]

@intellix I noticed that when you use that kind of scope variable, an object in your case, and you pass it on in the ng-repeat it will fail. If you use an array it does work. http://plnkr.co/edit/BkLD3M?p=preview

[intellix]

@Gamemaniak the version I posted illustrates an issue between changing the scope with something like $timeout and that having animate breaks it. Yours is just an initial carousel that works on mine as well :D

[matsko]

Try out 1.2.9 later today since there are a few class-based animation fixes in there.

[intellix]

1.2.9 completely killed UI Bootstrap animations for me. 1.2.10 didn't fix anything either :D I guess right now it's best to disable ngAnimate

[gorgi]

I lost the whole morning on this.
@autumn01 Thanks a lot, we'll use your solution until fix is made.

[matsko]

Sorry for the troubles with ngAnimate and ui-bootstrap. Before $animate is more merged into ui-bootstrap, the internal class-based animation code will be refactored to group animations together instead of cancelling followup animations when a CSS class is added.

This is a bit complex to fix, but it should make it into the next release. Then you can use $animate with ui-bootstrap without any side-effects.

[pkozlowski-opensource]

@matsko no worries - better to take time and do things right! Looking forward on talking / working with you on doing the $animate thing right in this project!

[alalonde]

Modal show/hide is broken with ngAnimate as well -- the 'in' class never gets added/removed.

[iamlothian]

@fogAndWhisky I haven't tested with the latest, have you tried? If it is not intergrated yet, the simple workaround I provided should still do the job.

[fogAndWhisky]

@iamlothian I apologize...I'm not seeing your workaround. Did you post under a different username?

[iamlothian]

Oops mobile posted to early, will clean that up later. Yep sorry @autumn01 posted it.

[fogAndWhisky]

Ah, ok. Thanks. :) I will test the @autumn01 workaround with latest build and report back.

(Apologies to any watchers for spam posts).

[chrisirhc]

This will be fixed soon through #1878 .

[fogAndWhisky]

@chrisirhc Thanks. That's good to hear.

@iamlothian Yes, the @autumn01 fix works just fine for now. Thanks very much. For anyone else trying to shortcut this thread and just find the (current) answer: this directive enables/disables ngAnimate for an individual component:

.directive('setNgAnimate', ['$animate', function ($animate) {
    return {
        link: function ($scope, $element, $attrs) {
            $scope.$watch( function() {
                return $scope.$eval($attrs.setNgAnimate, $scope);
            }, function(valnew, valold){
                console.log('Directive animation Enabled: ' + valnew);
                $animate.enabled(!!valnew, $element);
            });
        }
    };
}]);

Used like this:

<div ng-controller="SomeController" set-ng-animate="false">
    <carousel interval="myInterval">
        <slide ng-repeat="slideCollection in groupedSlides" active="slide.active">
            <div>
                <img ng-src="{{slideCollection.image1.image}}" style="margin:auto;">
                <img ng-src="{{slideCollection.image2.image}}" style="margin:auto;">
            </div>
        </slide>
    </carousel>
</div>

[matsko]

Would someone mind testing this out using the snapshot build of AngularJS? There was a change in the class-based animations that removed the blocking feature. This may just fix the problem.

[matsko]

http://code.angularjs.org/snapshot/

[chrisirhc]

@matsko , looks like you've solved it. Previously, the add animations were blocking each other. Now they're getting applied correctly as the transition only exists when both classes are active (I think).

EDIT: On reading your change further (angular/angular.js@1bebe36), I think it's because it's no longer blocking and waiting for the -add and -remove classes to finish "animating" before addition/removal. Looks good. 👍

Here are Plunkers with different builds.

Snapshot: http://plnkr.co/edit/cct3xQz0BhqBgirFIs4k?p=preview
1.2.15: http://plnkr.co/edit/hdnP6BOvhvjIrNm3gQUP?p=preview

[bealtine]

updated my plunk above
Still a few issues...
I'll have a closer look at this later or early next week.

[linagee]

I've been holding back my angular-animate to 1.2.8 and this seemed to let ui bootstrap carousel work for a while. (In Firefox, its broken on Chrome though.) I noticed though, even while holding that back to 1.2.8, upgrading the core angular library from 1.2.12 to 1.2.13 breaks the carousel. (I even tried just using angular core 1.2.15 and angular-animate 1.2.15, also broken.)

Been looking at the changes from 1.2.12 to 1.2.13:
angular/angular.js@v1.2.12...v1.2.13#files_bucket

[matsko]

@linagee more than likely anything < 1.3-beta.4 won't fix the issue since the class-based animation fix was a breaking change. Have a go with the latest 1.3 snapshot.

[linagee]

matsko: I can verify that 1.3.0-beta-4 looks a lot more better than 1.2.15! Thanks.

[leniel]

To remove ngAnimate from a single directive, do as described here:

#1350 (comment)

[iamlothian]

@leniel that issues is a duplication of this thread, and that solution was first proposed here 6 months ago.

[leniel]

@iamlothian Oh yes... TLDR; 😄 So that should be marked as duplicate, shouldn't it?

[matsko]

Hey guys. Is there anything else here that needs fixing in regards to ngAnimate?

[pkozlowski-opensource]

@matsko thnx for keeping an eye on this one, much appreciated! For the moment I'm not sure what the problem is, I really haven't had too much time to spend on the carousel thing lately... But seems like recurring problem so let me have a closer look over the weekend.

[iamlothian]

@matsko @pkozlowski-opensource
Here is an updated plunker using the latest versions: Angular "1.3.0-beta.5" and UI "0.11.0"

http://plnkr.co/edit/bY9nZIqvIkL4XybMe354?p=preview

It looks like the directive still fails to function normally without disabling angular animation an the element. I had to do this manually though as enabling it agin after the initial load using $animate.enabled(true, $element); doesn't work now.

Any ideas.

EDIT Via @leniel: updated bootstrap ui version to 0.11.0

[leniel]

@iamlothian isn't the latest version 0.11.0? http://angular-ui.github.io/bootstrap/

[whitehat101]

I just ran into this, too. #1350 (comment) provided a satisfactory workaround.

[bealtine]

not sure if this is still live or not but the problem still exists with 1.3.0-beta.17 : http://plnkr.co/edit/DCzZ07jQxNO4GfqTf3aO?p=preview

Thanks...

[YoavGrosman]

Problem still exists.
The height of the images is smaller then originally and the carousel slide distorts the images also...

[onemenny]

problem still exists with all latests

[wintlu]

Still have this problem in "angular": "1.3.2" and "bootstrap-sass-official": "~3.1.1"