Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Modal close animation not working #1341

Closed
crisbeto opened this issue Dec 3, 2013 · 2 comments
Closed

Modal close animation not working #1341

crisbeto opened this issue Dec 3, 2013 · 2 comments

Comments

@crisbeto
Copy link
Contributor

crisbeto commented Dec 3, 2013

The modal and the modal backdrop don't trigger css transitions when they're being closed. They both have ng-class="{in:animate}", however the element just gets removed when $modalInstance.close() gets called. There's no such problem when the modal is being opened.

It can be seen in the official demo: http://plnkr.co/7FM01InF2tEi2Imgb07W

@crisbeto
Copy link
Contributor Author

crisbeto commented Dec 3, 2013

EDIT: This is only as a reference not a solution to the problem

After a little bit of digging around I found this plunk: http://plnkr.co/edit/nZT58YNKT84UlSwTvfpc?p=preview

It uses Angular UI Bootstrap 0.5.0 (which doesn't have $modal, but does have $dialog) and both the open and close animations work (the "in" class gets removed on exit and when the animation finishes, the element gets removed from the DOM).

@pkozlowski-opensource
Copy link
Member

@crisbeto $modal is a rewrite of $dialog which had multiple design and implementation issues. There is no turning back, $modal needs to be fixed so support closing animations.

chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Dec 16, 2013
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Dec 24, 2013
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Dec 24, 2013
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Dec 24, 2013
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Dec 24, 2013
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Dec 24, 2013
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Jan 6, 2014
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Jan 6, 2014
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
chrisirhc added a commit to chrisirhc/angular-ui-bootstrap that referenced this issue Jan 6, 2014
Tests now have to wait for animation before checking for open modals.
Tests should actually check for the 'in' class.

Setting up both the transition end handler and a timeout ensures that
the modal is always closed even if there was an issue with the
transition. This was the implementation used by Twitter Bootstrap modal
JS code.

Note that unbinding the transition end event within the event
handler isn't necessary, and, worse is currently buggy in jqLite (see
angular/angular.js#5109 ).

Note that the scope is already destroyed when the dom is removed so the
$destroy call isn't needed.

Closes angular-ui#1341
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants