Skip to content

Commit b0b42c5

Browse files
mrholekmrholek
committed
refactor: use setTimeout if transitionend doesn't work
1 parent 516229f commit b0b42c5

File tree

10 files changed

+126
-58
lines changed

10 files changed

+126
-58
lines changed

‎packages/coreui-vue/src/components/backdrop/CBackdrop.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { defineComponent, h, RendererElement, Transition } from 'vue'
22

3+
import { executeAfterTransition } from './../../utils/transition'
4+
35
const CBackdrop = defineComponent({
46
name: 'CBackdrop',
57
props: {
@@ -16,24 +18,24 @@ const CBackdrop = defineComponent({
1618
const handleBeforeEnter = (el: RendererElement) => {
1719
el.classList.remove('d-none')
1820
}
21+
1922
const handleEnter = (el: RendererElement, done: () => void) => {
20-
el.addEventListener('transitionend', () => {
21-
done()
22-
})
23+
executeAfterTransition(() => done(), el as HTMLElement)
2324
setTimeout(() => {
2425
el.style.visibility = 'visible'
2526
el.classList.add('show')
2627
}, 1)
2728
}
29+
2830
const handleLeave = (el: RendererElement, done: () => void) => {
29-
el.addEventListener('transitionend', () => {
30-
done()
31-
})
31+
executeAfterTransition(() => done(), el as HTMLElement)
3232
el.classList.remove('show')
3333
}
34+
3435
const handleAfterLeave = (el: RendererElement) => {
3536
el.classList.add('d-none')
3637
}
38+
3739
return () =>
3840
h(
3941
Transition,

‎packages/coreui-vue/src/components/collapse/CCollapse.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { defineComponent, h, Transition, ref, RendererElement, withDirectives } from 'vue'
2+
23
import { vVisible } from '../../directives/v-c-visible'
4+
import { executeAfterTransition } from './../../utils/transition'
35

46
const CCollapse = defineComponent({
57
name: 'CCollapse',
@@ -39,10 +41,9 @@ const CCollapse = defineComponent({
3941

4042
const handleEnter = (el: RendererElement, done: () => void) => {
4143
emit('show')
42-
el.addEventListener('transitionend', () => {
43-
done()
44-
})
44+
// collapsing.value = true
4545
setTimeout(() => {
46+
executeAfterTransition(() => done(), el as HTMLElement)
4647
if (props.horizontal) {
4748
el.style.width = `${el.scrollWidth}px`
4849
return
@@ -69,10 +70,8 @@ const CCollapse = defineComponent({
6970

7071
const handleLeave = (el: RendererElement, done: () => void) => {
7172
emit('hide')
72-
el.addEventListener('transitionend', () => {
73-
done()
74-
})
7573
setTimeout(() => {
74+
executeAfterTransition(() => done(), el as HTMLElement)
7675
if (props.horizontal) {
7776
el.style.width = '0px'
7877
return

‎packages/coreui-vue/src/components/modal/CModal.ts

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import {
1212

1313
import { CBackdrop } from './../backdrop/CBackdrop'
1414

15+
import { executeAfterTransition } from './../../utils/transition'
16+
1517
const CModal = defineComponent({
1618
name: 'CModal',
1719
inheritAttrs: false,
@@ -141,31 +143,30 @@ const CModal = defineComponent({
141143
)
142144

143145
const handleEnter = (el: RendererElement, done: () => void) => {
144-
el.addEventListener('transitionend', () => {
145-
done()
146-
})
146+
executeAfterTransition(() => done(), el as HTMLElement)
147147
document.body.classList.add('modal-open')
148148
el.style.display = 'block'
149149
setTimeout(() => {
150150
el.classList.add('show')
151151
}, 1)
152152
emit('show')
153153
}
154+
154155
const handleAfterEnter = () => {
155156
window.addEventListener('mousedown', handleMouseDown)
156157
window.addEventListener('keyup', handleKeyUp)
157158
}
159+
158160
const handleLeave = (el: RendererElement, done: () => void) => {
159-
el.addEventListener('transitionend', () => {
160-
done()
161-
})
161+
executeAfterTransition(() => done(), el as HTMLElement)
162162
document.body.classList.remove('modal-open')
163163
if (document.body.className === '') {
164164
document.body.removeAttribute('class')
165165
}
166166

167167
el.classList.remove('show')
168168
}
169+
169170
const handleAfterLeave = (el: RendererElement) => {
170171
window.removeEventListener('mousedown', handleMouseDown)
171172
window.removeEventListener('keyup', handleKeyUp)
@@ -182,6 +183,7 @@ const CModal = defineComponent({
182183
if (props.backdrop !== 'static' && event.key === 'Escape' && props.keyboard) {
183184
handleDismiss()
184185
}
186+
185187
if (props.backdrop === 'static') {
186188
modalRef.value.classList.add('modal-static')
187189
emit('close-prevented')
@@ -201,6 +203,7 @@ const CModal = defineComponent({
201203
if (props.backdrop !== 'static') {
202204
handleDismiss()
203205
}
206+
204207
if (props.backdrop === 'static') {
205208
modalRef.value.classList.add('modal-static')
206209
setTimeout(() => {

‎packages/coreui-vue/src/components/nav/CNavGroup.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { defineComponent, h, onMounted, ref, RendererElement, Transition, watch } from 'vue'
22

3+
import { executeAfterTransition } from './../../utils/transition'
4+
35
const CNavGroup = defineComponent({
46
name: 'CNavGroup',
57
props: {
@@ -62,9 +64,7 @@ const CNavGroup = defineComponent({
6264
}
6365

6466
const handleEnter = (el: RendererElement, done: () => void) => {
65-
el.addEventListener('transitionend', () => {
66-
done()
67-
})
67+
executeAfterTransition(() => done(), el as HTMLElement)
6868
el.style.height = `${el.scrollHeight}px`
6969
}
7070

@@ -77,9 +77,7 @@ const CNavGroup = defineComponent({
7777
}
7878

7979
const handleLeave = (el: RendererElement, done: () => void) => {
80-
el.addEventListener('transitionend', () => {
81-
done()
82-
})
80+
executeAfterTransition(() => done(), el as HTMLElement)
8381
setTimeout(() => {
8482
el.style.height = '0px'
8583
}, 1)

‎packages/coreui-vue/src/components/offcanvas/COffcanvas.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { defineComponent, h, ref, RendererElement, Transition, watch, withDirectives } from 'vue'
2+
23
import { CBackdrop } from '../backdrop'
4+
35
import { vVisible } from '../../directives/v-c-visible'
6+
import { executeAfterTransition } from './../../utils/transition'
47

58
const COffcanvas = defineComponent({
69
name: 'COffcanvas',
@@ -88,9 +91,7 @@ const COffcanvas = defineComponent({
8891

8992
const handleEnter = (el: RendererElement, done: () => void) => {
9093
emit('show')
91-
el.addEventListener('transitionend', () => {
92-
done()
93-
})
94+
executeAfterTransition(() => done(), el as HTMLElement)
9495
setTimeout(() => {
9596
el.style.visibility = 'visible'
9697
el.classList.add('show')
@@ -101,9 +102,7 @@ const COffcanvas = defineComponent({
101102
window.addEventListener('keyup', handleKeyUp)
102103
}
103104
const handleLeave = (el: RendererElement, done: () => void) => {
104-
el.addEventListener('transitionend', () => {
105-
done()
106-
})
105+
executeAfterTransition(() => done(), el as HTMLElement)
107106
window.removeEventListener('mousedown', handleMouseDown)
108107
window.removeEventListener('keyup', handleKeyUp)
109108
el.classList.remove('show')

‎packages/coreui-vue/src/components/popover/CPopover.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
22
import { createPopper, Placement } from '@popperjs/core'
33

4+
import { executeAfterTransition } from './../../utils/transition'
5+
46
const CPopover = defineComponent({
57
name: 'CPopover',
68
props: {
@@ -83,18 +85,16 @@ const CPopover = defineComponent({
8385
emit('show')
8486
initPopper()
8587
el.classList.add('show')
86-
el.addEventListener('transitionend', () => {
87-
done()
88-
})
88+
executeAfterTransition(() => done(), el as HTMLElement)
8989
}
9090

9191
const handleLeave = (el: RendererElement, done: () => void) => {
9292
emit('hide')
9393
el.classList.remove('show')
94-
el.addEventListener('transitionend', () => {
94+
executeAfterTransition(() => {
9595
done()
9696
destroyPopper()
97-
})
97+
}, el as HTMLElement)
9898
}
9999

100100
const handleToggle = (event: Event) => {

‎packages/coreui-vue/src/components/tabs/CTabPane.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { defineComponent, h, ref, RendererElement, Transition, vShow, withDirectives } from 'vue'
22

3+
import { executeAfterTransition } from './../../utils/transition'
4+
35
const CTabPane = defineComponent({
46
name: 'CTabPane',
57
props: {
@@ -30,20 +32,16 @@ const CTabPane = defineComponent({
3032
firstRender.value = false
3133
emit('show')
3234
setTimeout(() => {
35+
executeAfterTransition(() => done(), el as HTMLElement)
3336
el.classList.add('show')
3437
}, 1)
35-
el.addEventListener('transitionend', () => {
36-
done()
37-
})
3838
}
3939

4040
const handleLeave = (el: RendererElement, done: () => void) => {
4141
firstRender.value = false
4242
emit('hide')
4343
el.classList.remove('show')
44-
el.addEventListener('transitionend', () => {
45-
done()
46-
})
44+
executeAfterTransition(() => done(), el as HTMLElement)
4745
}
4846

4947
return () =>

‎packages/coreui-vue/src/components/toast/CToast.ts

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { defineComponent, h, onMounted, provide, ref, RendererElement, Transition } from 'vue'
22

3+
import { executeAfterTransition } from './../../utils/transition'
4+
35
import { Color } from '../props'
46

57
const CToast = defineComponent({
@@ -79,29 +81,31 @@ const CToast = defineComponent({
7981
}
8082
provide('updateVisible', updateVisible)
8183

84+
const handleBeforeEnter = (el: RendererElement) => {
85+
el.classList.add('showing')
86+
}
87+
8288
const handleEnter = (el: RendererElement, done: () => void) => {
83-
el.addEventListener('transitionend', () => {
84-
done()
85-
})
89+
executeAfterTransition(() => done(), el as HTMLElement)
90+
el.classList.add('show')
8691
setTimeout(() => {
87-
el.classList.add('show')
92+
el.classList.remove('showing')
8893
}, 1)
94+
8995
if (props.index) {
9096
emit('show', props.index)
9197
} else {
9298
emit('show')
9399
}
94100
}
95-
const handleBeforeLeave = (el: RendererElement) => {
96-
el.classList.remove('show')
97-
}
101+
98102
const handleLeave = (el: RendererElement, done: () => void) => {
99-
el.addEventListener('transitionend', () => {
100-
done()
101-
})
102-
el.classList.remove('show')
103+
executeAfterTransition(() => done(), el as HTMLElement)
104+
el.classList.add('showing')
103105
}
106+
104107
const handleAfterLeave = (el: RendererElement) => {
108+
el.classList.remove('show')
105109
el.classList.add('hide')
106110
if (props.index) {
107111
emit('close', props.index)
@@ -125,8 +129,8 @@ const CToast = defineComponent({
125129
Transition,
126130
{
127131
appear: true,
132+
onBeforeEnter: (el) => handleBeforeEnter(el),
128133
onEnter: (el, done) => handleEnter(el, done),
129-
onBeforeLeave: (el) => handleBeforeLeave(el),
130134
onLeave: (el, done) => handleLeave(el, done),
131135
onAfterLeave: (el) => handleAfterLeave(el),
132136
},

‎packages/coreui-vue/src/components/tooltip/CTooltip.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { defineComponent, h, PropType, ref, RendererElement, Teleport, Transition } from 'vue'
22
import { createPopper, Placement } from '@popperjs/core'
33

4+
import { executeAfterTransition } from './../../utils/transition'
5+
46
const CTooltip = defineComponent({
57
name: 'CTooltip',
68
props: {
@@ -75,18 +77,16 @@ const CTooltip = defineComponent({
7577
emit('show')
7678
initPopper()
7779
el.classList.add('show')
78-
el.addEventListener('transitionend', () => {
79-
done()
80-
})
80+
executeAfterTransition(() => done(), el as HTMLElement)
8181
}
8282

8383
const handleLeave = (el: RendererElement, done: () => void) => {
8484
emit('hide')
8585
el.classList.remove('show')
86-
el.addEventListener('transitionend', () => {
86+
executeAfterTransition(() => {
8787
done()
8888
destroyPopper()
89-
})
89+
}, el as HTMLElement)
9090
}
9191

9292
const handleToggle = (event: Event) => {

0 commit comments

Comments
 (0)