Skip to content

Commit 81a5d31

Browse files
jd-solankijd-solanki
committed
fix(transition): don't override other transform properties
1 parent 0256496 commit 81a5d31

File tree

4 files changed

+69
-22
lines changed

4 files changed

+69
-22
lines changed

‎docs/guide/components/drawer.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ All props & slots available in `ACard` is available in `ADrawer`.
2020
<!-- 👉 Anchor -->
2121
::::card Anchor
2222

23-
You can change the position of the drawer by providing the values `left`、`right`、`top` or `bottom` to the `anchor` prop.
23+
You can change the position of the drawer by providing the values `left`,`right`,`top` or `bottom` to the `anchor` prop.
2424

2525
:::code DemoDrawerAnchor
2626
<<< @/components/demos/drawer/DemoDrawerAnchor.vue{22,30}

‎packages/anu-vue/src/components/drawer/ADrawer.vue

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,28 @@ if (!props.persistent) {
4848
})
4949
}
5050
51+
const transitionName = computed(() => {
52+
if (props.anchor === 'bottom')
53+
return 'slide-y'
54+
else if (props.anchor === 'top')
55+
return 'slide-y-reverse'
56+
else if (props.anchor === 'right')
57+
return 'slide-x-reverse'
58+
59+
return 'slide-x'
60+
})
61+
62+
const transitionClasses = computed(() => {
63+
if (props.anchor === 'bottom')
64+
return '[--slide-y-translateY:100%]'
65+
else if (props.anchor === 'top')
66+
return '[--slide-y-reverse-translateY:-100%]'
67+
else if (props.anchor === 'right')
68+
return '[--slide-x-reverse-translateX:100%]'
69+
70+
return '[--slide-x-translateX:-100%]'
71+
})
72+
5173
// Lock DOM scroll when modelValue is `true`
5274
// ℹ️ We need to use type assertion here because of this issue: https://github.com/johnsoncodehk/volar/issues/2219
5375
useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
@@ -71,12 +93,16 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
7193
['right', 'bottom'].includes(props.anchor) && 'justify-end',
7294
]"
7395
>
74-
<Transition :name="`slide-${props.anchor === 'bottom' ? 'up' : props.anchor === 'top' ? 'down' : props.anchor}`">
96+
<Transition
97+
:duration="30000"
98+
:name="transitionName"
99+
>
75100
<ACard
76101
v-show="props.modelValue"
77102
ref="refCard"
103+
:style="[`--${transitionName}-opacity: 1`, `--${transitionName}--transform-timing: ease-in-out`]"
78104
class="a-drawer backface-hidden transform translate-z-0"
79-
:class="[props.anchor === 'bottom' && '[--slide-y-translateY:100%]']"
105+
:class="transitionClasses"
80106
v-bind="{ ...$attrs, ...props }"
81107
>
82108
<!-- ℹ️ Recursively pass down slots to child -->

‎packages/anu-vue/src/components/view/AView.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ if (!groupModel)
2424
<!-- TODO: Fix type -->
2525
<div
2626
v-show="(groupModel.value as any).value === props.value"
27-
class="a-view w-full"
27+
class="a-view w-full transform"
2828
>
2929
<slot />
3030
</div>

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

Lines changed: 39 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,9 @@ $transition-name: 'scale';
5151
&-enter-from,
5252
&-leave-to {
5353
opacity: var(--#{$transition-name}-opacity, 0);
54-
transform: scale(var(--#{$transition-name}-scale, 0.8)) !important;
54+
// transform: scale(var(--#{$transition-name}-scale, 0.8)) !important;
55+
--un-scale-x: var(--#{$transition-name}-scale, 0.8);
56+
--un-scale-y: var(--#{$transition-name}-scale, 0.8);
5557
}
5658

5759
// Transition group
@@ -78,7 +80,8 @@ $transition-name: 'slide-y';
7880
&-enter-from,
7981
&-leave-to {
8082
opacity: var(--#{$transition-name}-opacity, 0);
81-
transform: translateY(var(--#{$transition-name}-translateY, 8px)) !important;
83+
// transform: translateY(var(--#{$transition-name}-translateY, 8px));
84+
--un-translate-y: var(--#{$transition-name}-translateY, 8px);
8285
}
8386

8487
// Transition group
@@ -105,7 +108,8 @@ $transition-name: 'slide-y-reverse';
105108
&-enter-from,
106109
&-leave-to {
107110
opacity: var(--#{$transition-name}-opacity, 0);
108-
transform: translateY(var(--#{$transition-name}-translateY, -8px)) !important;
111+
// transform: translateY(var(--#{$transition-name}-translateY, -8px));
112+
--un-translate-y: var(--#{$transition-name}-translateY, -8px);
109113
}
110114

111115
// Transition group
@@ -131,12 +135,14 @@ $transition-name: 'scroll-y';
131135

132136
&-enter-from {
133137
opacity: var(--#{$transition-name}-from-opacity, 0);
134-
transform: translateY(var(--#{$transition-name}-from-translateY, 8px)) !important;
138+
// transform: translateY(var(--#{$transition-name}-from-translateY, 8px)) !important;
139+
--un-translate-y: var(--#{$transition-name}-from-translateY, 8px);
135140
}
136141

137142
&-leave-to {
138143
opacity: var(--#{$transition-name}-to-opacity, 0);
139-
transform: translateY(var(--#{$transition-name}-to-translateY, -8px)) !important;
144+
// transform: translateY(var(--#{$transition-name}-to-translateY, -8px)) !important;
145+
--un-translate-y: var(--#{$transition-name}-to-translateY, -8px);
140146
}
141147

142148
// Transition group
@@ -162,12 +168,14 @@ $transition-name: 'scroll-y-reverse';
162168

163169
&-enter-from {
164170
opacity: var(--#{$transition-name}-from-opacity, 0);
165-
transform: translateY(var(--#{$transition-name}-from-translateY, -8px)) !important;
171+
// transform: translateY(var(--#{$transition-name}-from-translateY, -8px)) !important;
172+
--un-translate-y: var(--#{$transition-name}-from-translateY, -8px);
166173
}
167174

168175
&-leave-to {
169176
opacity: var(--#{$transition-name}-to-opacity, 0);
170-
transform: translateY(var(--#{$transition-name}-to-translateY, 8px)) !important;
177+
// transform: translateY(var(--#{$transition-name}-to-translateY, 8px)) !important;
178+
--un-translate-y: var(--#{$transition-name}-to-translateY, 8px);
171179
}
172180

173181
// Transition group
@@ -194,7 +202,8 @@ $transition-name: 'slide-x';
194202
&-enter-from,
195203
&-leave-to {
196204
opacity: var(--#{$transition-name}-opacity, 0);
197-
transform: translateX(var(--#{$transition-name}-translateX, -8px)) !important;
205+
// transform: translateX(var(--#{$transition-name}-translateX, -8px)) !important;
206+
--un-translate-x: var(--#{$transition-name}-translateX, -8px);
198207
}
199208

200209
// Transition group
@@ -221,7 +230,8 @@ $transition-name: 'slide-x-reverse';
221230
&-enter-from,
222231
&-leave-to {
223232
opacity: var(--#{$transition-name}-opacity, 0);
224-
transform: translateX(var(--#{$transition-name}-translateX, 8px)) !important;
233+
// transform: translateX(var(--#{$transition-name}-translateX, 8px)) !important;
234+
--un-translate-x: var(--#{$transition-name}-translateX, 8px);
225235
}
226236

227237
// Transition group
@@ -247,12 +257,14 @@ $transition-name: 'scroll-x';
247257

248258
&-enter-from {
249259
opacity: var(--#{$transition-name}-from-opacity, 0);
250-
transform: translateX(var(--#{$transition-name}-from-translateX, -8px)) !important;
260+
// transform: translateX(var(--#{$transition-name}-from-translateX, -8px)) !important;
261+
--un-translate-x: var(--#{$transition-name}-from-translateX, -8px);
251262
}
252263

253264
&-leave-to {
254265
opacity: var(--#{$transition-name}-to-opacity, 0);
255-
transform: translateX(var(--#{$transition-name}-to-translateX, 8px)) !important;
266+
// transform: translateX(var(--#{$transition-name}-to-translateX, 8px)) !important;
267+
--un-translate-x: var(--#{$transition-name}-to-translateX, 8px);
256268
}
257269

258270
// Transition group
@@ -278,12 +290,14 @@ $transition-name: 'scroll-x-reverse';
278290

279291
&-enter-from {
280292
opacity: var(--#{$transition-name}-from-opacity, 0);
281-
transform: translateX(var(--#{$transition-name}-from-translateX, 8px)) !important;
293+
// transform: translateX(var(--#{$transition-name}-from-translateX, 8px)) !important;
294+
--un-translate-x: var(--#{$transition-name}-from-translateX, 8px);
282295
}
283296

284297
&-leave-to {
285298
opacity: var(--#{$transition-name}-to-opacity, 0);
286-
transform: translateX(var(--#{$transition-name}-to-translateX, -8px)) !important;
299+
// transform: translateX(var(--#{$transition-name}-to-translateX, -8px)) !important;
300+
--un-translate-x: var(--#{$transition-name}-to-translateX, -8px);
287301
}
288302

289303
// Transition group
@@ -311,7 +325,9 @@ $transition-name: 'scroll-x-reverse';
311325
.dialog-enter-from,
312326
.dialog-leave-to {
313327
opacity: 0;
314-
transform: scale(0.45) !important;
328+
// transform: scale(0.45) !important;
329+
--un-scale-x: 0.45;
330+
--un-scale-y: 0.45;
315331
}
316332

317333
// 👉 View (component)
@@ -324,11 +340,13 @@ $transition-name: 'view-next';
324340
}
325341

326342
&-enter-from {
327-
transform: translateX(var(--#{$transition-name}-from-translateX, 100%)) !important;
343+
// transform: translateX(var(--#{$transition-name}-from-translateX, 100%)) !important;
344+
--un-translate-x: var(--#{$transition-name}-from-translateX, 100%);
328345
}
329346

330347
&-leave-to {
331-
transform: translateX(var(--#{$transition-name}-to-translateX, -100%)) !important;
348+
// transform: translateX(var(--#{$transition-name}-to-translateX, -100%)) !important;
349+
--un-translate-x: var(--#{$transition-name}-to-translateX, -100%);
332350
}
333351

334352
// Transition group
@@ -341,6 +359,7 @@ $transition-name: 'view-next';
341359
}
342360
}
343361
}
362+
344363
$transition-name: 'view-previous';
345364
.#{$transition-name} {
346365
&-move,
@@ -350,11 +369,13 @@ $transition-name: 'view-previous';
350369
}
351370

352371
&-enter-from {
353-
transform: translateX(var(--#{$transition-name}-from-translateX, -100%)) !important;
372+
// transform: translateX(var(--#{$transition-name}-from-translateX, -100%)) !important;
373+
--un-translate-x: var(--#{$transition-name}-from-translateX, -100%);
354374
}
355375

356376
&-leave-to {
357-
transform: translateX(var(--#{$transition-name}-to-translateX, 100%)) !important;
377+
// transform: translateX(var(--#{$transition-name}-to-translateX, 100%)) !important;
378+
--un-translate-x: var(--#{$transition-name}-to-translateX, 100%);
358379
}
359380

360381
// Transition group

0 commit comments

Comments
 (0)