Element with ng-show=false animates initially when it's in a bootstrap-ui modal

[Narretz]

This is a follow-up to #5262 It turns out that the issue I described is different from the original issue described. In my case, I have a ng-show animation inside a bootstrap-ui modal that is initially set to false. When the modal opens, however, the element is animated from shown to hidden, while it should simply be not shown. I have posted a workaround here: #5262 (comment)

[matsko]

@Narretz did this by chance get fixed with RC0?

[Narretz]

Nope, unfortunately it still happens: http://plnkr.co/edit/RcWCCktlLYonooUXNOnZ?p=preview

[caitp]

Looks like it's working to me: http://plnkr.co/edit/qPE3aAE6jJCvcvhtigZT?p=preview (wait, I might be wrong, hang on)

[caitp]

Okay yeah so it does still animate :( But @Narretz the plunker you linked was broken and didn't really demonstrate that :p

[Narretz]

Thanks for checking @caitp
The plunker was frozen at the wrong version ... the ui for that is not that great.

[IgorMinar]

@caitp can you please look into this? repro with rc3: http://plnkr.co/edit/103bF0Ve4ioXkdCRONaS?p=preview

[caitp]

http://plnkr.co/edit/YCMZP41SnHLZke6sEeqy?p=preview I think this is basically the two cases we are looking at.

so, in the case of doing this with jQuery/raw DOM operations, I don't think there is much we can do --- but we still see the issue with ngAnimate's enter/leave being used too.

I think if classBasedAnimationsBlocked() (from ngAnimate) looked at parent elements as well as the current element, then we'd be able to fix the enter/leave case. I'm not sure why we're not doing that.

@matsko can you explain this quickly?

[caitp]

So matsko has said there are basically 2 options: bootstrap should be able to just disable animations on the modal, and then re-enable them shortly after (I tried to demonstrate this in my mini-repro, but I couldn't make it work --- it never re-enabled animations! but I was probably just doing it wrong).

Alternatively, something about making ng-animate-children more dynamic, so that a directive could wrap the temporary animation prevention nicely to be reused in many places.

Either of these seem like good solutions to this problem to me (well, moreso the first one if I can figure out how to make that work properly).

[IgorMinar]

@caitp any luck with making the first solution work?

[caitp]

no, from what I've seen, re-enabling animations after disabling doesn't seem to have any effect on child elements

[Narretz]

I might be missing something, but I don't think ng-animate-children should be part of the problem here. ui-bootstrap uses a custom transition handling that uses the original bootstrap styles.

[petebacondarwin]

This is still a problem on master. Moving to 1.4.x milestone.

[asoules]

👍 same issue here.

[Narretz]

I believe this is not something that ngAnimate can be expected to solve. the bootstrap modal (at least in this version) doesn't use ngAnimate to trigger then moving / fading in of the modal, so ngAnimate has no chance to detect that there's an animation going on. If ngAnimate knew that there was an animation, it would not anmate stuff in the modal. I think in recent versions, the modal actually uses $animate, so this issue should be moot. Otherwise, the modal service could disable animations on the modal elements with $animate.enabled(el, false) until the opening animation has finished.