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.