Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

feat(panel): allow transform to be animated on elements with an offset #9905

Closed
crisbeto opened this issue Oct 24, 2016 · 0 comments · Fixed by #11390
Closed

feat(panel): allow transform to be animated on elements with an offset #9905

crisbeto opened this issue Oct 24, 2016 · 0 comments · Fixed by #11390
Assignees
@Splaktar @crisbeto
Labels
g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue hotlist: animations P2: required Issues that must be fixed. resolution: fixed type: enhancement ui: CSS ux: polish
Milestone
1.1.23

Comments

@crisbeto
Copy link
Member

crisbeto commented Oct 24, 2016 •
edited
Loading

If a panel has an offset (position.withOffsetX or position.withOffsetY), then it's transform can't be animated, because it uses inline transforms to do the offsetting. I'm considering applying the animations to an inner container, that has nothing to do with the panel positioning.

This issue is blocking for #9641.

CC @ErinCoughlan @bradrich @DerekLouie
@crisbeto crisbeto added the P2: required Issues that must be fixed. label Oct 24, 2016
@crisbeto crisbeto added this to the - Backlog milestone Oct 24, 2016
@crisbeto crisbeto self-assigned this Oct 24, 2016
@crisbeto crisbeto mentioned this issue Oct 24, 2016
Open
3 tasks
@crisbeto crisbeto added the has: Pull Request A PR has been created to address this issue label Oct 29, 2016
crisbeto added a commit to crisbeto/material that referenced this issue Oct 29, 2016
@crisbeto
fix(panel): allow transform to be animated on an offset panel
fc21fb0 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to angular#9641.
Fixes angular#9905.
@crisbeto crisbeto mentioned this issue Oct 29, 2016
Closed
crisbeto added a commit to crisbeto/material that referenced this issue Oct 29, 2016
@crisbeto
fix(panel): allow transform to be animated on an offset panel
01ef22a 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to angular#9641.
Fixes angular#9905.
crisbeto added a commit to crisbeto/material that referenced this issue Oct 31, 2016
@crisbeto
fix(panel): allow transform to be animated on an offset panel
098f8df 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to angular#9641.
Fixes angular#9905.
crisbeto added a commit to crisbeto/material that referenced this issue Jan 1, 2017
@crisbeto
fix(panel): allow transform to be animated on an offset panel
c9f01b7 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to angular#9641.
Fixes angular#9905.
crisbeto added a commit to crisbeto/material that referenced this issue Jan 1, 2017
@crisbeto
fix(panel): allow transform to be animated on an offset panel
ae4bdca 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to angular#9641.
Fixes angular#9905.
crisbeto added a commit to crisbeto/material that referenced this issue May 10, 2017
@crisbeto
fix(panel): allow transform to be animated on an offset panel
ce1f5c9 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to angular#9641.
Fixes angular#9905.
@Splaktar Splaktar modified the milestones: - Backlog, 1.2.0 Feb 7, 2018
crisbeto added a commit to crisbeto/material that referenced this issue Feb 7, 2018
@crisbeto
fix(panel): allow transform to be animated on an offset panel
9cad06e 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to angular#9641.
Fixes angular#9905.
@Splaktar Splaktar changed the title Panel doesn't allow transform to be animated on elements with an offset feat(panel): allow transform to be animated on elements with an offset Jul 31, 2018
@Splaktar Splaktar mentioned this issue Jul 31, 2018
Closed
3 tasks
Splaktar pushed a commit that referenced this issue Jul 31, 2018
@crisbeto @Splaktar
fix(panel): allow transform to be animated on an offset panel
93d6572 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to #9641.
Fixes #9905.
@Splaktar Splaktar mentioned this issue Jul 31, 2018
Merged
6 tasks
@Splaktar Splaktar modified the milestones: 1.2.0, 1.1.11 Jul 31, 2018
@Splaktar Splaktar self-assigned this Jul 31, 2018
@Splaktar Splaktar modified the milestones: 1.1.11, 1.1.12 Oct 25, 2018
@Splaktar Splaktar modified the milestones: 1.1.12, 1.1.13 Jan 3, 2019
@Splaktar Splaktar modified the milestones: 1.1.13, 1.1.14 Feb 10, 2019
@Splaktar Splaktar added g3: reported The issue was reported by an internal or external product team. g3: sync labels Feb 12, 2019
@Splaktar Splaktar modified the milestones: 1.1.14, g3: sync Feb 15, 2019
@jelbourn jelbourn removed this from the g3: sync milestone Feb 22, 2019
@jelbourn jelbourn removed the g3: sync label Feb 22, 2019
@Splaktar Splaktar added this to the 1.1.21 milestone May 30, 2019
@Splaktar Splaktar modified the milestones: 1.1.21, 1.1.22 Aug 15, 2019
@Splaktar Splaktar modified the milestones: 1.1.22, 1.1.23 Oct 22, 2019
Splaktar pushed a commit that referenced this issue May 15, 2020
@crisbeto @Splaktar
fix(panel): allow transform to be animated on an offset panel
7ef555e 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to #9641.
Fixes #9905.
Splaktar pushed a commit that referenced this issue Jun 16, 2020
@crisbeto @Splaktar
fix(panel): allow transform to be animated on an offset panel
c3a30fb 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to #9641.
Fixes #9905.
Splaktar pushed a commit that referenced this issue Jun 17, 2020
@crisbeto @Splaktar
fix(panel): allow transform to be animated on an offset panel
269b68e 
Previously, if a panel had a position with an offset (e.g. `$mdPanel.newPanelPosition().center()`), the positioning would break any `transform` animations on the panel. This was due to the fact that `mdPanel` uses inline `transform` styles to do the offsetting. These changes introduce a wrapper around the panel (`.md-panel-inner-wrapper`), which will handle all of the positioning, allowing for any animations to be applied to the `.md-panel` itself.

Relates to #9641.
Fixes #9905.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

@crisbeto crisbeto

Labels
g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue hotlist: animations P2: required Issues that must be fixed. resolution: fixed type: enhancement ui: CSS ux: polish
Projects
None yet
Milestone
1.1.23
3 participants
@jelbourn @Splaktar @crisbeto