Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
/angular.jsPublic archive

Commitfb7d67c

Browse files
committed
Fix(ng-animate-ref): copy contextual styling to clone
Copy all contextual styling to the cloned element.The list of properties that are copied is derived fromhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_propertiesCloses#12402
1 parentb54634d commitfb7d67c

File tree

1 file changed

+118
-4
lines changed

1 file changed

+118
-4
lines changed

‎src/ngAnimate/animateCssDriver.js

Lines changed: 118 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,120 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
99
varNG_OUT_ANCHOR_CLASS_NAME='ng-anchor-out';
1010
varNG_IN_ANCHOR_CLASS_NAME='ng-anchor-in';
1111

12+
13+
varANIMATED_PROPS=[
14+
'MozOutlineRadius',
15+
'MozOutlineRadiusBottomleft',
16+
'MozOutlineRadiusBottomright',
17+
'MozOutlineRadiusTopleft',
18+
'MozOutlineRadiusTopright',
19+
'WebkitTextStroke',
20+
'WebkitTextStrokeColor',
21+
'WebkitTouchCallout',
22+
'backdropFilter',
23+
'background',
24+
'backgroundColor',
25+
'backgroundPosition',
26+
'backgroundSize',
27+
'border',
28+
'borderBottom',
29+
'borderBottomColor',
30+
'borderBottomLeftRadius',
31+
'borderBottomRightRadius',
32+
'borderBottomWidth',
33+
'borderColor',
34+
'borderLeft',
35+
'borderLeftColor',
36+
'borderLeftWidth',
37+
'borderRadius',
38+
'borderRight',
39+
'borderRightColor',
40+
'borderRightWidth',
41+
'borderTop',
42+
'borderTopColor',
43+
'borderTopLeftRadius',
44+
'borderTopRightRadius',
45+
'borderTopWidth',
46+
'borderWidth',
47+
'bottom',
48+
'boxShadow',
49+
'clip',
50+
'clipPath',
51+
'color',
52+
'columnCount',
53+
'columnGap',
54+
'columnRule',
55+
'columnRuleColor',
56+
'columnRuleWidth',
57+
'columnWidth',
58+
'columns',
59+
'filter',
60+
'flex',
61+
'flexBasis',
62+
'flexGrow',
63+
'flexShrink',
64+
'font',
65+
'fontSize',
66+
'fontSizeAdjust',
67+
'fontStretch',
68+
'fontWeight',
69+
'gridColumnGap',
70+
'gridGap',
71+
'gridRowGap',
72+
'letterSpacing',
73+
'lineHeight',
74+
'margin',
75+
'marginBottom',
76+
'marginLeft',
77+
'marginRight',
78+
'marginTop',
79+
'mask',
80+
'maskPosition',
81+
'maskSize',
82+
'maxHeight',
83+
'maxWidth',
84+
'minHeight',
85+
'minWidth',
86+
'motionOffset',
87+
'motionRotation',
88+
'objectPosition',
89+
'opacity',
90+
'order',
91+
'outline',
92+
'outlineColor',
93+
'outlineOffset',
94+
'outlineWidth',
95+
'padding',
96+
'paddingBottom',
97+
'paddingLeft',
98+
'paddingRight',
99+
'paddingTop',
100+
'perspective',
101+
'perspectiveOrigin',
102+
'scrollSnapCoordinate',
103+
'scrollSnapDestination',
104+
'shapeImageThreshold',
105+
'shapeMargin',
106+
'shapeOutside',
107+
'textDecoration',
108+
'textDecorationColor',
109+
'textEmphasis',
110+
'textEmphasisColor',
111+
'textIndent',
112+
'textShadow',
113+
'transform',
114+
'transformOrigin',
115+
'verticalAlign',
116+
'wordSpacing',
117+
'zIndex'
118+
];
119+
12120
functionisDocumentFragment(node){
13121
returnnode.parentNode&&node.parentNode.nodeType===11;
14122
}
15123

16-
this.$get=['$animateCss','$rootScope','$$AnimateRunner','$rootElement','$sniffer','$$jqLite','$document',
17-
function($animateCss,$rootScope,$$AnimateRunner,$rootElement,$sniffer,$$jqLite,$document){
124+
this.$get=['$animateCss','$rootScope','$$AnimateRunner','$rootElement','$sniffer','$$jqLite','$document','$window',
125+
function($animateCss,$rootScope,$$AnimateRunner,$rootElement,$sniffer,$$jqLite,$document,$window){
18126

19127
// only browsers that support these properties can render animations
20128
if(!$sniffer.animations&&!$sniffer.transitions)returnnoop;
@@ -121,11 +229,13 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
121229
functioncalculateAnchorStyles(anchor){
122230
varstyles={};
123231

124-
varcoords=getDomNode(anchor).getBoundingClientRect();
232+
vardomNode=getDomNode(anchor);
233+
varcomputedStyle=domNode.currentStyle||$window.getComputedStyle(domNode)||[];
234+
varcoords=domNode.getBoundingClientRect();
125235

126236
// we iterate directly since safari messes up and doesn't return
127237
// all the keys for the coords object when iterated
128-
forEach(['width','height','top','left'],function(key){
238+
forEach(['width','height','top','left','color'],function(key){
129239
varvalue=coords[key];
130240
switch(key){
131241
case'top':
@@ -137,6 +247,10 @@ var $$AnimateCssDriverProvider = ['$$animationProvider', function($$animationPro
137247
}
138248
styles[key]=Math.floor(value)+'px';
139249
});
250+
forEach(ANIMATED_PROPS,function(prop){
251+
styles[prop]=computedStyle[prop];
252+
});
253+
140254
returnstyles;
141255
}
142256

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp