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

Undesired column menu animation change #3436

Closed
wattsbn opened this issue May 6, 2015 · 5 comments · Fixed by #6588
Closed

Undesired column menu animation change #3436

wattsbn opened this issue May 6, 2015 · 5 comments · Fixed by #6588
Assignees
@PaulL1
Labels
type: bug

Comments

@wattsbn
Copy link
Contributor

wattsbn commented May 6, 2015

When switching from 3.0.0-rc.20 to 3.0.0-rc.21, I noticed a change in the column menu animation. It used to be nice and subtle, but it now comes down from the top of the page.
Hopefully this is just a bug and not an intentional change.

You can see it on the main demo page (using Chrome if that matters).
http://ui-grid.info/
@PaulL1
Copy link
Contributor

PaulL1 commented May 16, 2015

Yeah, it's a bug. I think it was an attempt to fix column menu positioning on IE9 that broke it, although I haven't bisected yet to prove that. @c0bra

@PaulL1 PaulL1 self-assigned this May 16, 2015
@PaulL1
Copy link
Contributor

PaulL1 commented May 16, 2015

Hmm. Or maybe it's not that at all. I seem to recall doing a change where I moved where in the directives the menu lived. Perhaps that did it.

Looks like I'm up for a full bisect.

@PaulL1
Copy link
Contributor

PaulL1 commented May 16, 2015

Hmm. I bisected all the way back into Dec. It seems to have always done it. Interesting.

@ronaldcs
Copy link

Ran into this weird issue too...but the animation seems to not be present in http://ui-grid.info/customizer/?

@ronaldcs
Copy link

I think I found it. It's related to the UI Grid CSS (in the case of ui-grid-unstable.css, line 146):

.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-add,
.ui-grid-column-menu .ui-grid-menu .ui-grid-menu-mid.ng-hide-remove {
  -webkit-transition: all 0.05s linear;
  -moz-transition: all 0.05s linear;
  -o-transition: all 0.05s linear;
  transition: all 0.05s linear;
  display: block !important;
}

Comment out the above lines in the CSS and the animation goes away.

EDIT: Sorry, there's supposed to be an animation on the column menu (I was basically trying to replicate the behavior of the http://ui-grid.info/customizer/ page, which has no menu animation). Please note that this completely gets rid of the animation for the grid column menu and may have unintended side effects.

@brandonr1 brandonr1 mentioned this issue Jul 2, 2015
Closed
caseyjhol added a commit to snapappointments/ui-grid that referenced this issue Mar 3, 2018
@caseyjhol
fix(menus): Fix menu positioning/animation
0264b11 
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes angular-ui#3436, angular-ui#3921, angular-ui#3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes angular-ui#6587.
@caseyjhol caseyjhol mentioned this issue Mar 3, 2018
Merged
caseyjhol added a commit to snapappointments/ui-grid that referenced this issue Mar 3, 2018
@caseyjhol
fix(menus): Fix menu positioning/animation
399784b 
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes angular-ui#3436, angular-ui#3921, angular-ui#3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes angular-ui#6587.

remove lastMenuWidth from tests
caseyjhol added a commit to snapappointments/ui-grid that referenced this issue Mar 3, 2018
@caseyjhol
fix(menus): Fix menu positioning/animation
1a0f4b4 
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes angular-ui#3436, angular-ui#3921, angular-ui#3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes angular-ui#6587.

remove lastMenuWidth from tests

no message
mportuga pushed a commit that referenced this issue Mar 5, 2018
@caseyjhol @mportuga
fix(menus): Fix menu positioning/animation
25dbd2e 
Since v3.0.0-rc.21, the column/grid menu animation slides down from
above the grid, but it is visible the entire time. This causes the
animation to appear clunky. This has been resolved by setting `overflow:
hidden` on the menu.

Fixes #3436, #3921, #3978.

Showing/hiding the menu can seem slow. The menu animation has been sped
up as well, and when it is hidden, the animation is now twice as fast.

Previously, to calculate the menu position, the width of the menu needed
to be calculated, which meant calling `repositionMenu` twice - once when
first opening the menu, and again after the menu is visible to allow the
width of the menu to be determined. This also meant there was always a
"shift" when the menu was first opened (as a default width of 170px was
used until the actual width of the menu could be determined. This
implements the CSS trick `right: 100%` so the width is not needed when
determining the menu's position, meaning the menu can be opened much
more smoothly and without needing to call `repositionMenu` twice.

Fixes #6587.

remove lastMenuWidth from tests

no message
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@PaulL1 PaulL1

Labels
type: bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(menus): Fix menu positioning/animation snapappointments/ui-grid
3 participants
@wattsbn @ronaldcs @PaulL1