Skip to content

Commit ebbf51b

Browse files
jd-solankijd-solanki
committed
fix(transitions): use individual transform properties for transition
1 parent d450f1b commit ebbf51b

File tree

1 file changed

+51
-33
lines changed

1 file changed

+51
-33
lines changed

‎packages/anu-vue/src/scss/index.scss

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,17 @@ $transition-name: 'scale';
4646
&-move,
4747
&-enter-active,
4848
&-leave-active {
49-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
49+
transition: scale var(--#{$transition-name}-scale-duration, 0.35s) var(--#{$transition-name}-scale-timing, cubic-bezier(0.33, 1, 0.68, 1)),
5050
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
5151
}
5252

5353
&-enter-from,
5454
&-leave-to {
5555
opacity: var(--#{$transition-name}-opacity, 0);
5656
// transform: scale(var(--#{$transition-name}-scale, 0.8)) !important;
57-
--un-scale-x: var(--#{$transition-name}-scale, 0.8);
58-
--un-scale-y: var(--#{$transition-name}-scale, 0.8);
57+
// --un-scale-x: var(--#{$transition-name}-scale, 0.8);
58+
// --un-scale-y: var(--#{$transition-name}-scale, 0.8);
59+
scale: var(--#{$transition-name}-scale, 0.8);
5960
}
6061

6162
// Transition group
@@ -75,15 +76,16 @@ $transition-name: 'slide-y';
7576
&-move,
7677
&-enter-active,
7778
&-leave-active {
78-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
79+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
7980
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
8081
}
8182

8283
&-enter-from,
8384
&-leave-to {
8485
opacity: var(--#{$transition-name}-opacity, 0);
8586
// transform: translateY(var(--#{$transition-name}-translateY, 8px));
86-
--un-translate-y: var(--#{$transition-name}-translateY, 8px);
87+
// --un-translate-y: var(--#{$transition-name}-translateY, 8px);
88+
translate: 0 var(--#{$transition-name}-translateY, 8px);
8789
}
8890

8991
// Transition group
@@ -103,15 +105,16 @@ $transition-name: 'slide-y-reverse';
103105
&-move,
104106
&-enter-active,
105107
&-leave-active {
106-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
108+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
107109
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
108110
}
109111

110112
&-enter-from,
111113
&-leave-to {
112114
opacity: var(--#{$transition-name}-opacity, 0);
113115
// transform: translateY(var(--#{$transition-name}-translateY, -8px));
114-
--un-translate-y: var(--#{$transition-name}-translateY, -8px);
116+
// --un-translate-y: var(--#{$transition-name}-translateY, -8px);
117+
translate: 0 var(--#{$transition-name}-translateY, -8px);
115118
}
116119

117120
// Transition group
@@ -131,20 +134,22 @@ $transition-name: 'scroll-y';
131134
&-move,
132135
&-enter-active,
133136
&-leave-active {
134-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
137+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
135138
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
136139
}
137140

138141
&-enter-from {
139142
opacity: var(--#{$transition-name}-from-opacity, 0);
140143
// transform: translateY(var(--#{$transition-name}-from-translateY, 8px)) !important;
141-
--un-translate-y: var(--#{$transition-name}-from-translateY, 8px);
144+
// --un-translate-y: var(--#{$transition-name}-from-translateY, 8px);
145+
translate: 0 var(--#{$transition-name}-from-translateY, 8px);
142146
}
143147

144148
&-leave-to {
145149
opacity: var(--#{$transition-name}-to-opacity, 0);
146150
// transform: translateY(var(--#{$transition-name}-to-translateY, -8px)) !important;
147-
--un-translate-y: var(--#{$transition-name}-to-translateY, -8px);
151+
// --un-translate-y: var(--#{$transition-name}-to-translateY, -8px);
152+
translate: 0 var(--#{$transition-name}-to-translateY, -8px);
148153
}
149154

150155
// Transition group
@@ -164,20 +169,22 @@ $transition-name: 'scroll-y-reverse';
164169
&-move,
165170
&-enter-active,
166171
&-leave-active {
167-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
172+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
168173
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
169174
}
170175

171176
&-enter-from {
172177
opacity: var(--#{$transition-name}-from-opacity, 0);
173178
// transform: translateY(var(--#{$transition-name}-from-translateY, -8px)) !important;
174-
--un-translate-y: var(--#{$transition-name}-from-translateY, -8px);
179+
// --un-translate-y: var(--#{$transition-name}-from-translateY, -8px);
180+
translate: 0 var(--#{$transition-name}-from-translateY, -8px);
175181
}
176182

177183
&-leave-to {
178184
opacity: var(--#{$transition-name}-to-opacity, 0);
179185
// transform: translateY(var(--#{$transition-name}-to-translateY, 8px)) !important;
180-
--un-translate-y: var(--#{$transition-name}-to-translateY, 8px);
186+
// --un-translate-y: var(--#{$transition-name}-to-translateY, 8px);
187+
translate: 0 var(--#{$transition-name}-to-translateY, 8px);
181188
}
182189

183190
// Transition group
@@ -197,15 +204,16 @@ $transition-name: 'slide-x';
197204
&-move,
198205
&-enter-active,
199206
&-leave-active {
200-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
207+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
201208
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
202209
}
203210

204211
&-enter-from,
205212
&-leave-to {
206213
opacity: var(--#{$transition-name}-opacity, 0);
207214
// transform: translateX(var(--#{$transition-name}-translateX, -8px)) !important;
208-
--un-translate-x: var(--#{$transition-name}-translateX, -8px);
215+
// --un-translate-x: var(--#{$transition-name}-translateX, -8px);
216+
translate: var(--#{$transition-name}-translateX, -8px) 0;
209217
}
210218

211219
// Transition group
@@ -225,15 +233,16 @@ $transition-name: 'slide-x-reverse';
225233
&-move,
226234
&-enter-active,
227235
&-leave-active {
228-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
236+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
229237
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
230238
}
231239

232240
&-enter-from,
233241
&-leave-to {
234242
opacity: var(--#{$transition-name}-opacity, 0);
235243
// transform: translateX(var(--#{$transition-name}-translateX, 8px)) !important;
236-
--un-translate-x: var(--#{$transition-name}-translateX, 8px);
244+
// --un-translate-x: var(--#{$transition-name}-translateX, 8px);
245+
translate: var(--#{$transition-name}-translateX, 8px) 0;
237246
}
238247

239248
// Transition group
@@ -253,20 +262,22 @@ $transition-name: 'scroll-x';
253262
&-move,
254263
&-enter-active,
255264
&-leave-active {
256-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
265+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
257266
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
258267
}
259268

260269
&-enter-from {
261270
opacity: var(--#{$transition-name}-from-opacity, 0);
262271
// transform: translateX(var(--#{$transition-name}-from-translateX, -8px)) !important;
263-
--un-translate-x: var(--#{$transition-name}-from-translateX, -8px);
272+
// --un-translate-x: var(--#{$transition-name}-from-translateX, -8px);
273+
translate: var(--#{$transition-name}-from-translateX, -8px) 0;
264274
}
265275

266276
&-leave-to {
267277
opacity: var(--#{$transition-name}-to-opacity, 0);
268278
// transform: translateX(var(--#{$transition-name}-to-translateX, 8px)) !important;
269-
--un-translate-x: var(--#{$transition-name}-to-translateX, 8px);
279+
// --un-translate-x: var(--#{$transition-name}-to-translateX, 8px);
280+
translate: var(--#{$transition-name}-to-translateX, 8px) 0;
270281
}
271282

272283
// Transition group
@@ -286,20 +297,22 @@ $transition-name: 'scroll-x-reverse';
286297
&-move,
287298
&-enter-active,
288299
&-leave-active {
289-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1)),
300+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1)),
290301
opacity var(--#{$transition-name}-opacity-duration, 0.15s) var(--#{$transition-name}-opacity-timing, ease-in-out);
291302
}
292303

293304
&-enter-from {
294305
opacity: var(--#{$transition-name}-from-opacity, 0);
295306
// transform: translateX(var(--#{$transition-name}-from-translateX, 8px)) !important;
296-
--un-translate-x: var(--#{$transition-name}-from-translateX, 8px);
307+
// --un-translate-x: var(--#{$transition-name}-from-translateX, 8px);
308+
translate: var(--#{$transition-name}-from-translateX, 8px) 0;
297309
}
298310

299311
&-leave-to {
300312
opacity: var(--#{$transition-name}-to-opacity, 0);
301313
// transform: translateX(var(--#{$transition-name}-to-translateX, -8px)) !important;
302-
--un-translate-x: var(--#{$transition-name}-to-translateX, -8px);
314+
// --un-translate-x: var(--#{$transition-name}-to-translateX, -8px);
315+
translate: var(--#{$transition-name}-to-translateX, -8px) 0;
303316
}
304317

305318
// Transition group
@@ -315,21 +328,22 @@ $transition-name: 'scroll-x-reverse';
315328

316329
// 👉 Dialog
317330
.dialog-enter-active {
318-
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
331+
transition: scale 0.35s cubic-bezier(0.16, 1, 0.3, 1),
319332
opacity 0.18s cubic-bezier(0.5, 1, 0.89, 1);
320333
}
321334

322335
.dialog-leave-active {
323-
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
336+
transition: scale 0.35s cubic-bezier(0.16, 1, 0.3, 1),
324337
opacity 0.25s cubic-bezier(0, 0.55, 0.45, 1);
325338
}
326339

327340
.dialog-enter-from,
328341
.dialog-leave-to {
329342
opacity: 0;
330343
// transform: scale(0.45) !important;
331-
--un-scale-x: 0.45;
332-
--un-scale-y: 0.45;
344+
// --un-scale-x: 0.45;
345+
// --un-scale-y: 0.45;
346+
scale: 0.45;
333347
}
334348

335349
// 👉 View (component)
@@ -338,17 +352,19 @@ $transition-name: 'view-next';
338352
&-move,
339353
&-enter-active,
340354
&-leave-active {
341-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1));
355+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1));
342356
}
343357

344358
&-enter-from {
345359
// transform: translateX(var(--#{$transition-name}-from-translateX, 100%)) !important;
346-
--un-translate-x: var(--#{$transition-name}-from-translateX, 100%);
360+
// --un-translate-x: var(--#{$transition-name}-from-translateX, 100%);
361+
translate: var(--#{$transition-name}-from-translateX, 100%) 0;
347362
}
348363

349364
&-leave-to {
350365
// transform: translateX(var(--#{$transition-name}-to-translateX, -100%)) !important;
351-
--un-translate-x: var(--#{$transition-name}-to-translateX, -100%);
366+
// --un-translate-x: var(--#{$transition-name}-to-translateX, -100%);
367+
translate: var(--#{$transition-name}-to-translateX, -100%) 0;
352368
}
353369

354370
// Transition group
@@ -367,17 +383,19 @@ $transition-name: 'view-previous';
367383
&-move,
368384
&-enter-active,
369385
&-leave-active {
370-
transition: transform var(--#{$transition-name}-transform-duration, 0.35s) var(--#{$transition-name}-transform-timing, cubic-bezier(0.33, 1, 0.68, 1));
386+
transition: translate var(--#{$transition-name}-translate-duration, 0.35s) var(--#{$transition-name}-translate-timing, cubic-bezier(0.33, 1, 0.68, 1));
371387
}
372388

373389
&-enter-from {
374390
// transform: translateX(var(--#{$transition-name}-from-translateX, -100%)) !important;
375-
--un-translate-x: var(--#{$transition-name}-from-translateX, -100%);
391+
// --un-translate-x: var(--#{$transition-name}-from-translateX, -100%);
392+
translate: var(--#{$transition-name}-from-translateX, -100%) 0;
376393
}
377394

378395
&-leave-to {
379396
// transform: translateX(var(--#{$transition-name}-to-translateX, 100%)) !important;
380-
--un-translate-x: var(--#{$transition-name}-to-translateX, 100%);
397+
// --un-translate-x: var(--#{$transition-name}-to-translateX, 100%);
398+
translate: var(--#{$transition-name}-to-translateX, 100%) 0;
381399
}
382400

383401
// Transition group

0 commit comments

Comments
 (0)