Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Collapse plugin - issues with transition end event bubbling #13157

Closed
ghost opened this issue Mar 24, 2014 · 10 comments
Closed

Collapse plugin - issues with transition end event bubbling #13157

ghost opened this issue Mar 24, 2014 · 10 comments
Labels
js

Comments

@ghost
Copy link

ghost commented Mar 24, 2014

See below posts for the cause and potential fix for this issue. It appears that child elements with transitions can effect the hide method within the plugin, causing the collapse to "lock" and work intermittently.
@cvrebert cvrebert added the js label Mar 24, 2014
@cvrebert
Copy link
Collaborator

What OS and browser have you seen this problem with?
Can you post a live example (e.g. JS Fiddle) demonstrating the problem?

@ghost
Copy link
Author

ghost commented Mar 24, 2014

Sorry I've been trying to get my head around what was causing my issues but I think I've worked it out. If you have a transitioned child element within the trigger for the collapse, it seems to break the animation at some point. I think this is due to the event bubbling for transition end perhaps? It also means the event target (e.target) is incorrect which locks up the whole thing.

Here's my js fiddle:
http://jsfiddle.net/R9NaE/7/

Sorry the title may be misleading now.

Cheers
Sam

@ghost
Copy link
Author

ghost commented Mar 24, 2014

Sorry, I forgot to add, obviously removing the transition on that element fixed it for me. It was a tough one to work out. Event bubbling is a right git.

@ghost
Copy link
Author

ghost commented Mar 24, 2014

With a little more digging, I've discovered this problem will effect any child element within the collapse with transitions. It can be solved by changing the event binding for the hide method from .one(...) to .on(...) for transition end. The callback itself handles whether the event.target is the correct element anyway and returns if it isn't correct element. The problem is, if it only fires once then it'll never fire again if using .one(...).

Sorry if it's a little confusing. It's more for others that might be running into the same problem.

@ghost ghost changed the title Collapse hide.complete function - difference between minified and non minified Collapse plugin - issues with transition end event bubbling Mar 24, 2014
@fat
Copy link
Member

fat commented Mar 25, 2014

should have been fixed with this 4d96e69

@fat
Copy link
Member

fat commented Mar 25, 2014

hm i think im confused… let me trying treading through this thread 1 more time

@fat
Copy link
Member

fat commented Mar 25, 2014

oh gotcha, ya should be on good catch @spotts-ce !

@ghost
Copy link
Author

ghost commented Mar 25, 2014

Sorry mate. It was a bit of a brain dump. Got there in the end !

@fat
Copy link
Member

fat commented Mar 25, 2014

heh no problem

fat added a commit that referenced this issue Mar 25, 2014
@fat
fixes #13157 - Collapse plugin - issues with transition end event bub…
ac904f7 
…bling
fat added a commit that referenced this issue Mar 25, 2014
@fat
fixes #13157 - Collapse plugin - issues with transition end event bub…
d081102 
…bling
@mdo mdo closed this as completed Mar 25, 2014
@mdo mdo mentioned this issue Mar 25, 2014
Closed
@cvrebert
Copy link
Collaborator

@mdo The fix hasn't actually been merged yet...: #13176

@ghost ghost mentioned this issue Mar 29, 2014
Closed
fat added a commit that referenced this issue Apr 9, 2014
@fat
fixes #13157 - Collapse plugin - issues with transition end event bub…
bcd153d 
…bling
fat added a commit that referenced this issue Apr 22, 2014
@fat @cvrebert
fixes #13157 - Collapse plugin - issues with transition end event bub…
b9ae07d 
…bling
mdo added a commit that referenced this issue Apr 25, 2014
@mdo
Merge pull request #13176 from twbs/fat-13157
022dc30 
fixes #13157 - Collapse plugin - issues with transition end event bubbli...
ithcy pushed a commit to stevelaz/bootstrap that referenced this issue Apr 30, 2014
Merge remote-tracking branch 'upstream/master'
0e329a8 
* upstream/master: (298 commits)
  add ie-emulation-modes-warning.js to docs & examples
  Minor Spacing fixes
  Run `grunt`.
  Update holder.js to v2.3.2.
  Update JSZip to v2.2.1.
  Carousel.slide: rename e => slideEvent
  change 'slid' comments per @fat's feedback
  Document that @import-ing Bootstrap can break the icon font path
  fix twbs#13427
  add IE warning scripts to linter config
  remove semicolons :'-(
  add script to warn folks trying to test old IE using IE's unreliable emulation modes
  Document .direction & .relatedTarget properties of Carousel events. Fixes twbs#13395
  Add direction & relatedTarget properties to slid.bs.carousel event Fixes #13393
  document that show-ing a tooltip/popover on a hidden element doesn't work; fixes twbs#13362
  README: Authors => Creators
  the master branch is the relevant one for current build status
  Add missing word.
  fixes twbs#13157 - Collapse plugin - issues with transition end event bubbling
  document that non-:visible scrollspy targets are ignored; fixes twbs#13394
  ...

Conflicts:
	dist/css/bootstrap-theme.css
	dist/css/bootstrap-theme.min.css
	dist/css/bootstrap.css.map
	dist/css/bootstrap.min.css
	less/variables.less
This was referenced Sep 16, 2021
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
js
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mdo @fat @cvrebert