Skip to content

Commit fe876e2

Browse files
RobinMalfaitRobinMalfait
authored
Fix enter transitions in Vue (#1395)
* fix enter transitions in Vue * add example slide-over that shows the issue * update changelog * add Heroicons for playground
1 parent b71fcb3 commit fe876e2

File tree

6 files changed

+126
-2
lines changed

6 files changed

+126
-2
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1616
### Fixed
1717

1818
- Manually passthrough `attrs` for `Combobox`, `Listbox` and `TabsGroup` component ([#1372](https://github.com/tailwindlabs/headlessui/pull/1372))
19+
- Fix enter transitions in Vue ([#1395](https://github.com/tailwindlabs/headlessui/pull/1395))
1920

2021
## [@headlessui/react@v1.6.0] - 2022-04-25
2122

‎packages/@headlessui-vue/src/components/transitions/transition.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ export let TransitionChild = defineComponent({
291291

292292
onMounted(() => {
293293
watch(
294-
[show, appear],
294+
[show],
295295
(_oldValues, _newValues, onInvalidate) => {
296296
executeTransition(onInvalidate)
297297
initial.value = false
@@ -394,7 +394,7 @@ export let TransitionRoot = defineComponent({
394394
state.value = TreeStates.Hidden
395395
})
396396

397-
let initial = { value: true }
397+
let initial = ref(true)
398398
let transitionBag = {
399399
show,
400400
appear: computed(() => props.appear || !initial.value),

‎packages/playground-vue/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
},
1616
"dependencies": {
1717
"@headlessui/vue": "*",
18+
"@heroicons/vue": "^1.0.6",
1819
"vue": "^3.2.27",
1920
"vue-flatpickr-component": "^9.0.5",
2021
"vue-router": "^4.0.0"

‎packages/playground-vue/src/components/dialog/slide-over.vue‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<template>
2+
<TransitionRoot as="template" :show="open">
3+
<Dialog as="div" class="relative z-10" @close="open = false">
4+
<TransitionChild
5+
as="template"
6+
enter="ease-in-out duration-500"
7+
enter-from="opacity-0"
8+
enter-to="opacity-100"
9+
leave="ease-in-out duration-500"
10+
leave-from="opacity-100"
11+
leave-to="opacity-0"
12+
>
13+
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
14+
</TransitionChild>
15+
16+
<div class="fixed inset-0 overflow-hidden">
17+
<div class="absolute inset-0 overflow-hidden">
18+
<div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
19+
<TransitionChild
20+
as="template"
21+
enter="transform transition ease-in-out duration-500 sm:duration-700"
22+
enter-from="translate-x-full"
23+
enter-to="translate-x-0"
24+
leave="transform transition ease-in-out duration-500 sm:duration-700"
25+
leave-from="translate-x-0"
26+
leave-to="translate-x-full"
27+
>
28+
<DialogPanel class="pointer-events-auto w-screen max-w-md">
29+
<div class="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
30+
<div class="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
31+
<div class="flex items-start justify-between">
32+
<DialogTitle class="text-lg font-medium text-gray-900">Title...</DialogTitle>
33+
<div class="ml-3 flex h-7 items-center">
34+
<button
35+
type="button"
36+
class="-m-2 p-2 text-gray-400 hover:text-gray-500"
37+
@click="open = false"
38+
>
39+
<span class="sr-only">Close panel</span>
40+
<XIcon class="h-6 w-6" aria-hidden="true" />
41+
</button>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
</DialogPanel>
47+
</TransitionChild>
48+
</div>
49+
</div>
50+
</div>
51+
</Dialog>
52+
</TransitionRoot>
53+
</template>
54+
55+
<script>
56+
import { ref, watchEffect } from 'vue'
57+
import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'
58+
import { XIcon } from '@heroicons/vue/outline'
59+
60+
const products = [
61+
{
62+
id: 1,
63+
name: 'Throwback Hip Bag',
64+
href: '#',
65+
color: 'Salmon',
66+
price: '$90.00',
67+
quantity: 1,
68+
imageSrc: 'https://tailwindui.com/img/ecommerce-images/shopping-cart-page-04-product-01.jpg',
69+
imageAlt:
70+
'Salmon orange fabric pouch with match zipper, gray zipper pull, and adjustable hip belt.',
71+
},
72+
{
73+
id: 2,
74+
name: 'Medium Stuff Satchel',
75+
href: '#',
76+
color: 'Blue',
77+
price: '$32.00',
78+
quantity: 1,
79+
imageSrc: 'https://tailwindui.com/img/ecommerce-images/shopping-cart-page-04-product-02.jpg',
80+
imageAlt:
81+
'Front of satchel with blue canvas body, black straps and handle, drawstring top, and front zipper pouch.',
82+
},
83+
// More products...
84+
]
85+
86+
export default {
87+
components: {
88+
Dialog,
89+
DialogPanel,
90+
DialogTitle,
91+
TransitionChild,
92+
TransitionRoot,
93+
XIcon,
94+
},
95+
setup() {
96+
const open = ref(true)
97+
98+
watchEffect(() => {
99+
if (open.value === false) {
100+
setTimeout(() => {
101+
open.value = true
102+
}, 1000)
103+
}
104+
})
105+
106+
return {
107+
products,
108+
open,
109+
}
110+
},
111+
}
112+
</script>

‎packages/playground-vue/src/routes.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,11 @@
166166
"name": "Dialog",
167167
"path": "/dialog/dialog",
168168
"component": "./components/dialog/dialog.vue"
169+
},
170+
{
171+
"name": "Dialog Slide Over",
172+
"path": "/dialog/slide-over",
173+
"component": "./components/dialog/slide-over.vue"
169174
}
170175
]
171176
},

‎yarn.lock‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,11 @@
326326
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
327327
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
328328

329+
"@heroicons/vue@^1.0.6":
330+
version "1.0.6"
331+
resolved "https://registry.yarnpkg.com/@heroicons/vue/-/vue-1.0.6.tgz#d8b90734b436eb5a87f40cc300b64a0fb0031f7f"
332+
integrity sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==
333+
329334
"@istanbuljs/load-nyc-config@^1.0.0":
330335
version "1.1.0"
331336
resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"

0 commit comments

Comments
 (0)