Skip to content

Commit cc8d5d8

Browse files
pexea12pexea12
committed
fix(lightbox): fix transition
1 parent 0573d53 commit cc8d5d8

File tree

4 files changed

+189
-148
lines changed

4 files changed

+189
-148
lines changed

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,3 +314,6 @@ Most of the CSS belongs to [react-images](https://github.com/jossmac/react-image
314314
- [@neobutter](https://github.com/neobutter)
315315
- [@mudin](https://github.com/mudin)
316316
- [@asterisx](https://github.com/asterisx)
317+
- [@janosrusiczki](https://github.com/janosrusiczki)
318+
janosrusiczki)
319+
janosrusiczki]

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-image-lightbox",
33
"description": "A Vue.js package to display an image gallery lightbox",
4-
"version": "7.1.1",
4+
"version": "7.1.2",
55
"author": "Nguyen P. Thien Dzung <[email protected]>",
66
"license": "MIT",
77
"main": "dist/vue-image-lightbox.min.js",

‎src/components/LightBox.vue

Lines changed: 161 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,158 +1,165 @@
11
<template>
22
<div @click.stop="closeLightBox">
3-
<div
4-
v-if="media && media.length > 0"
5-
v-show="lightBoxOn"
6-
ref="container"
7-
class="vue-lb-container"
3+
<transition
4+
mode="out-in"
5+
name="vue-lb-content-transition"
6+
@afterEnter="enableImageTransition"
7+
@beforeLeave="disableImageTransition"
88
>
9-
<div class="vue-lb-content">
10-
<div class="vue-lb-header">
11-
<span />
12-
<button
13-
v-if="closable"
14-
type="button"
15-
:title="closeText"
16-
class="vue-lb-button-close"
17-
>
18-
<slot name="close">
19-
<CloseIcon />
20-
</slot>
21-
</button> <!-- .vue-lb-button-close -->
22-
</div> <!-- .vue-lb-header -->
23-
<div
24-
class="vue-lb-figure"
25-
@click.stop
26-
>
27-
<transition
28-
mode="out-in"
29-
name="fade"
30-
>
31-
<img
32-
v-if="media[select].type !== 'video'"
33-
:key="media[select].src"
34-
v-lazy="{
35-
src: media[select].src,
36-
loading: media[select].src,
37-
error: media[select].src,
38-
}"
39-
:srcset="media[select].srcset || ''"
40-
class="vue-lb-modal-image"
41-
:alt="media[select].caption"
9+
<div
10+
v-if="media && media.length > 0"
11+
v-show="lightBoxOn"
12+
ref="container"
13+
class="vue-lb-container"
14+
>
15+
<div class="vue-lb-content">
16+
<div class="vue-lb-header">
17+
<span />
18+
<button
19+
v-if="closable"
20+
type="button"
21+
:title="closeText"
22+
class="vue-lb-button-close"
4223
>
43-
<video
44-
v-else
45-
ref="video"
46-
controls
47-
:key="media[select].sources[0].src"
48-
:width="media[select].width"
49-
:height="media[select].height"
50-
:autoplay="media[select].autoplay"
24+
<slot name="close">
25+
<CloseIcon />
26+
</slot>
27+
</button> <!-- .vue-lb-button-close -->
28+
</div> <!-- .vue-lb-header -->
29+
<div
30+
class="vue-lb-figure"
31+
@click.stop
32+
>
33+
<transition
34+
mode="out-in"
35+
:name="modalImageTransitionName"
5136
>
52-
<source
53-
v-for="source in media[select].sources"
54-
:key="source.src"
55-
:src="source.src"
56-
:type="source.type"
37+
<img
38+
v-if="media[select].type !== 'video'"
39+
:key="media[select].src"
40+
v-lazy="{
41+
src: media[select].src,
42+
loading: media[select].src,
43+
error: media[select].src,
44+
}"
45+
:srcset="media[select].srcset || ''"
46+
class="vue-lb-modal-image"
47+
:alt="media[select].caption"
48+
>
49+
<video
50+
v-else
51+
ref="video"
52+
controls
53+
:key="media[select].sources[0].src"
54+
:width="media[select].width"
55+
:height="media[select].height"
56+
:autoplay="media[select].autoplay"
5757
>
58-
</video>
59-
</transition>
58+
<source
59+
v-for="source in media[select].sources"
60+
:key="source.src"
61+
:src="source.src"
62+
:type="source.type"
63+
>
64+
</video>
65+
</transition>
66+
67+
<slot name="customCaption">
68+
<div
69+
v-show="showCaption"
70+
class="vue-lb-info"
71+
v-html="media[select].caption"
72+
/>
73+
</slot>
6074

61-
<slot name="customCaption">
62-
<div
63-
v-show="showCaption"
64-
class="vue-lb-info"
65-
v-html="media[select].caption"
66-
/>
67-
</slot>
75+
<div class="vue-lb-footer">
76+
<div class="vue-lb-footer-info" />
77+
<div
78+
v-if="media.length > 1"
79+
class="vue-lb-footer-count"
80+
>
81+
<slot
82+
name="footer"
83+
:current="select + 1"
84+
:total="media.length"
85+
>
86+
{{ select + 1 }} / {{ media.length }}
87+
</slot>
88+
</div>
89+
</div>
90+
</div>
91+
</div> <!-- .vue-lb-content -->
92+
<div class="vue-lb-thumbnail-wrapper">
93+
<div
94+
v-if="showThumbs"
95+
class="vue-lb-thumbnail"
96+
>
97+
<button
98+
v-if="media.length > 1"
99+
type="button"
100+
class="vue-lb-thumbnail-arrow vue-lb-thumbnail-left"
101+
:title="previousThumbText"
102+
@click.stop="previousImage()"
103+
>
104+
<slot name="previousThumb">
105+
<LeftArrowIcon />
106+
</slot>
107+
</button>
68108

69-
<div class="vue-lb-footer">
70-
<div class="vue-lb-footer-info" />
71109
<div
72-
v-if="media.length > 1"
73-
class="vue-lb-footer-count"
110+
v-for="(image, index) in imagesThumb"
111+
v-show="index >= thumbIndex.begin && index <= thumbIndex.end"
112+
:key="typeof image.src === 'string' ? `${image.src}${index}` : index"
113+
v-lazy:background-image="image"
114+
:class="'vue-lb-modal-thumbnail' + (select === index ? '-active' : '')"
115+
@click.stop="showImage(index)"
74116
>
75117
<slot
76-
name="footer"
77-
:current="select + 1"
78-
:total="media.length"
118+
v-if="image.type"
119+
name="videoIcon"
79120
>
80-
{{ select + 1 }} / {{ media.length }}
121+
<VideoIcon />
81122
</slot>
82123
</div>
83-
</div>
84-
</div>
85-
</div> <!-- .vue-lb-content -->
86-
<div class="vue-lb-thumbnail-wrapper">
87-
<div
88-
v-if="showThumbs"
89-
class="vue-lb-thumbnail"
90-
>
91-
<button
92-
v-if="media.length > 1"
93-
type="button"
94-
class="vue-lb-thumbnail-arrow vue-lb-thumbnail-left"
95-
:title="previousThumbText"
96-
@click.stop="previousImage()"
97-
>
98-
<slot name="previousThumb">
99-
<LeftArrowIcon />
100-
</slot>
101-
</button>
102124

103-
<div
104-
v-for="(image, index) in imagesThumb"
105-
v-show="index >= thumbIndex.begin && index <= thumbIndex.end"
106-
:key="typeof image.src === 'string' ? `${image.src}${index}` : index"
107-
v-lazy:background-image="image"
108-
:class="'vue-lb-modal-thumbnail' + (select === index ? '-active' : '')"
109-
@click.stop="showImage(index)"
110-
>
111-
<slot
112-
v-if="image.type"
113-
name="videoIcon"
125+
<button
126+
v-if="media.length > 1"
127+
type="button"
128+
class="vue-lb-thumbnail-arrow vue-lb-thumbnail-right"
129+
:title="nextThumbText"
130+
@click.stop="nextImage()"
114131
>
115-
<VideoIcon />
116-
</slot>
117-
</div>
118-
119-
<button
120-
v-if="media.length > 1"
121-
type="button"
122-
class="vue-lb-thumbnail-arrow vue-lb-thumbnail-right"
123-
:title="nextThumbText"
124-
@click.stop="nextImage()"
125-
>
126-
<slot name="nextThumb">
127-
<RightArrowIcon />
128-
</slot>
129-
</button>
130-
</div> <!-- .vue-lb-thumbnail -->
131-
</div>
132-
<button
133-
v-if="media.length > 1"
134-
type="button"
135-
class="vue-lb-arrow vue-lb-left"
136-
:title="previousText"
137-
@click.stop="previousImage()"
138-
>
139-
<slot name="previous">
140-
<LeftArrowIcon />
141-
</slot>
142-
</button>
143-
144-
<button
145-
v-if="media.length > 1"
146-
type="button"
147-
class="vue-lb-arrow vue-lb-right"
148-
:title="nextText"
149-
@click.stop="nextImage()"
150-
>
151-
<slot name="next">
152-
<RightArrowIcon />
153-
</slot>
154-
</button>
155-
</div> <!-- .vue-lb-container -->
132+
<slot name="nextThumb">
133+
<RightArrowIcon />
134+
</slot>
135+
</button>
136+
</div> <!-- .vue-lb-thumbnail -->
137+
</div>
138+
<button
139+
v-if="media.length > 1"
140+
type="button"
141+
class="vue-lb-arrow vue-lb-left"
142+
:title="previousText"
143+
@click.stop="previousImage()"
144+
>
145+
<slot name="previous">
146+
<LeftArrowIcon />
147+
</slot>
148+
</button>
149+
150+
<button
151+
v-if="media.length > 1"
152+
type="button"
153+
class="vue-lb-arrow vue-lb-right"
154+
:title="nextText"
155+
@click.stop="nextImage()"
156+
>
157+
<slot name="next">
158+
<RightArrowIcon />
159+
</slot>
160+
</button>
161+
</div> <!-- .vue-lb-container -->
162+
</transition>
156163
</div>
157164
</template>
158165

@@ -269,6 +276,7 @@ export default {
269276
select: this.startAt,
270277
lightBoxOn: this.showLightBox,
271278
timer: null,
279+
modalImageTransitionName: 'vue-lb-modal-image-no-transition',
272280
}
273281
},
274282
@@ -397,13 +405,16 @@ export default {
397405
},
398406
399407
onToggleLightBox(value) {
400-
if (value) this.onLightBoxOpen()
401-
else this.onLightBoxClose()
408+
if (value) {
409+
this.onLightBoxOpen()
410+
} else {
411+
this.onLightBoxClose()
412+
}
402413
},
403414
404415
showImage(index) {
405-
this.$set(this, 'lightBoxOn', true)
406416
this.$set(this, 'select', index)
417+
this.$set(this, 'lightBoxOn', true)
407418
},
408419
409420
addKeyEvent(event) {
@@ -424,6 +435,14 @@ export default {
424435
previousImage() {
425436
this.$set(this, 'select', (this.select + this.media.length - 1) % this.media.length)
426437
},
438+
439+
enableImageTransition() {
440+
this.$set(this, 'modalImageTransitionName', 'vue-lb-modal-image-transition')
441+
},
442+
443+
disableImageTransition() {
444+
this.$set(this, 'modalImageTransitionName', 'vue-lb-modal-image-no-transition')
445+
},
427446
},
428447
}
429448
</script>

0 commit comments

Comments
 (0)