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

Commitb0b42c5

Browse files
committed
refactor: use setTimeout if transitionend doesn't work
1 parent516229f commitb0b42c5

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
constCBackdrop=defineComponent({
46
name:'CBackdrop',
57
props:{
@@ -16,24 +18,24 @@ const CBackdrop = defineComponent({
1618
consthandleBeforeEnter=(el:RendererElement)=>{
1719
el.classList.remove('d-none')
1820
}
21+
1922
consthandleEnter=(el:RendererElement,done:()=>void)=>{
20-
el.addEventListener('transitionend',()=>{
21-
done()
22-
})
23+
executeAfterTransition(()=>done(),elasHTMLElement)
2324
setTimeout(()=>{
2425
el.style.visibility='visible'
2526
el.classList.add('show')
2627
},1)
2728
}
29+
2830
consthandleLeave=(el:RendererElement,done:()=>void)=>{
29-
el.addEventListener('transitionend',()=>{
30-
done()
31-
})
31+
executeAfterTransition(()=>done(),elasHTMLElement)
3232
el.classList.remove('show')
3333
}
34+
3435
consthandleAfterLeave=(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
constCCollapse=defineComponent({
57
name:'CCollapse',
@@ -39,10 +41,9 @@ const CCollapse = defineComponent({
3941

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

7071
consthandleLeave=(el:RendererElement,done:()=>void)=>{
7172
emit('hide')
72-
el.addEventListener('transitionend',()=>{
73-
done()
74-
})
7573
setTimeout(()=>{
74+
executeAfterTransition(()=>done(),elasHTMLElement)
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
constCModal=defineComponent({
1618
name:'CModal',
1719
inheritAttrs:false,
@@ -141,31 +143,30 @@ const CModal = defineComponent({
141143
)
142144

143145
consthandleEnter=(el:RendererElement,done:()=>void)=>{
144-
el.addEventListener('transitionend',()=>{
145-
done()
146-
})
146+
executeAfterTransition(()=>done(),elasHTMLElement)
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
consthandleAfterEnter=()=>{
155156
window.addEventListener('mousedown',handleMouseDown)
156157
window.addEventListener('keyup',handleKeyUp)
157158
}
159+
158160
consthandleLeave=(el:RendererElement,done:()=>void)=>{
159-
el.addEventListener('transitionend',()=>{
160-
done()
161-
})
161+
executeAfterTransition(()=>done(),elasHTMLElement)
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
consthandleAfterLeave=(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
constCNavGroup=defineComponent({
46
name:'CNavGroup',
57
props:{
@@ -62,9 +64,7 @@ const CNavGroup = defineComponent({
6264
}
6365

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

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

7979
consthandleLeave=(el:RendererElement,done:()=>void)=>{
80-
el.addEventListener('transitionend',()=>{
81-
done()
82-
})
80+
executeAfterTransition(()=>done(),elasHTMLElement)
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
constCOffcanvas=defineComponent({
69
name:'COffcanvas',
@@ -88,9 +91,7 @@ const COffcanvas = defineComponent({
8891

8992
consthandleEnter=(el:RendererElement,done:()=>void)=>{
9093
emit('show')
91-
el.addEventListener('transitionend',()=>{
92-
done()
93-
})
94+
executeAfterTransition(()=>done(),elasHTMLElement)
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
consthandleLeave=(el:RendererElement,done:()=>void)=>{
104-
el.addEventListener('transitionend',()=>{
105-
done()
106-
})
105+
executeAfterTransition(()=>done(),elasHTMLElement)
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
constCPopover=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(),elasHTMLElement)
8989
}
9090

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

100100
consthandleToggle=(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
constCTabPane=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(),elasHTMLElement)
3336
el.classList.add('show')
3437
},1)
35-
el.addEventListener('transitionend',()=>{
36-
done()
37-
})
3838
}
3939

4040
consthandleLeave=(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(),elasHTMLElement)
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
constCToast=defineComponent({
@@ -79,29 +81,31 @@ const CToast = defineComponent({
7981
}
8082
provide('updateVisible',updateVisible)
8183

84+
consthandleBeforeEnter=(el:RendererElement)=>{
85+
el.classList.add('showing')
86+
}
87+
8288
consthandleEnter=(el:RendererElement,done:()=>void)=>{
83-
el.addEventListener('transitionend',()=>{
84-
done()
85-
})
89+
executeAfterTransition(()=>done(),elasHTMLElement)
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-
consthandleBeforeLeave=(el:RendererElement)=>{
96-
el.classList.remove('show')
97-
}
101+
98102
consthandleLeave=(el:RendererElement,done:()=>void)=>{
99-
el.addEventListener('transitionend',()=>{
100-
done()
101-
})
102-
el.classList.remove('show')
103+
executeAfterTransition(()=>done(),elasHTMLElement)
104+
el.classList.add('showing')
103105
}
106+
104107
consthandleAfterLeave=(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
constCTooltip=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(),elasHTMLElement)
8181
}
8282

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

9292
consthandleToggle=(event:Event)=>{

0 commit comments

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