Transitions never finish for hidden elements

[alexreardon]

file: transition.js
If an element is not visible then the transitionEnd events will never file.

Quick fix - uses jQuery is:('visible')

// Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur
$timeout(function () {
    if (angular.isString(trigger)) {
        element.addClass(trigger);
    } else if (angular.isFunction(trigger)) {
        trigger(element);
    } else if (angular.isObject(trigger)) {
        element.css(trigger);
    }
    //If browser does not support transitions, instantly resolve
    if (!endEventName) {
        deferred.resolve(element);

        // new
        return;
    }

    /***** NEW:  *******/
    // Invisible elements
    // if element is not visible then transitionEnd will never fire as animation will not occur
    // need to manually resolve the transition
    if (!element.is(':visible')) {
        transitionEndHandler();
    }
});

This fix requires jQuery .is(':visible') however I am sure there would be a jqlite work around.

Example of problem:
If you start a collapse on an element that is hidden then the collapsing class will be added, but it will never be removed and replaced with collapse in.

[caitp]

This sounds suspiciously like the problems I was trying to solve when I started working on the bootstrap3 version of collapse last summer!

There were workarounds implemented, but they kind of sucked and could be improved upon. You could always take a look at the old PRs for that (the issue number escapes me) for inspiration on how to fix it.

[mrowles]

+1

[maikeldaloo]

+1

[chrisirhc]

This will be resolved when the transition to using $animate / ngAnimate is done. There are a number of issues open for this. For example: #1444

[alexreardon]

Okay cool. I'll leave my quick fix in for now then

[ciampo]

Could this problem be related to the carousel too ?

When I click on the left/right arrows to change slide, it works only the first time (basically the transitionDone(next, current) is never called by the $scope.$currentTransition promise).

If I click on the small white circular indicators, it works but with some flashing of the carousel.