Skip to content

Commit

Permalink
feature - 增加transition过渡效果，事件处理加入防抖
Browse files Browse the repository at this point in the history
  • Loading branch information
@littlewin-wang
littlewin-wang committed Nov 24, 2017
1 parent ec63c96 commit f4467e4
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 52 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<title>vue-images</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./static/animate.css">
</head>
<body>
<div id="app"></div>
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Expand Up @@ -26,7 +26,6 @@
],
"license": "MIT",
"dependencies": {
"animate.css": "^3.5.2",
"lazysizes": "^3.0.0",
"vue": "^2.1.0"
},
Expand Down
54 changes: 34 additions & 20 deletions src/components/fancybox.vue
View file
Expand Up @@ -14,7 +14,9 @@
<icon :type="'close'" :color="'#ccc'"></icon>
</div>
</div>
<img ref="images" class="image animated lazyload" v-for="item in images" :key="item.index" :data-src="item.imageUrl" v-show="item.index===index+1" @click.stop="addIndex">
<transition-group :mode="transition.mode" :enter-active-class="'animated ' + transition.enterClass" :leave-active-class="'animated ' + transition.leaveClass">
<img ref="images" class="image lazyload" v-for="item in images" :key="item.index" :data-src="item.imageUrl" v-show="item.index===index+1 && !reset" @click.stop="addIndex">
</transition-group>
<div class="footer">
<span class="caption" @click.stop v-show="showcaption" v-html="images[index].caption"></span>
<span class="count" @click.stop v-show="showimagecount">{{ index+1 }} {{imagecountseparator}} {{ images[index].total }}</span>
Expand Down Expand Up @@ -51,7 +53,8 @@
next: true,
animation: false,
isFullScreen: document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen,
isPlay: false
isPlay: false,
isShow: true
}
},
created () {
Expand All @@ -66,24 +69,41 @@
that.isFullScreen = !that.isFullScreen
})
},
computed: {
transition () {
return {
mode: '',
enterClass: this.next ? 'slideInLeft' : 'slideInRight',
leaveClass: this.next ? 'slideOutRight' : 'slideOutLeft'
}
}
},
methods: {
decIndex () {
this.$refs.images[this.index].classList.add('slideOutRight')
var that = this
window.setTimeout(() => {
that.$emit('decIndex')
that.next = true
that.animation = true
if (this.timeout) {
clearTimeout(this.timeout)
} else {
this.$emit('decIndex')
this.next = true
this.animation = true
}
this.timeout = setTimeout(() => {
this.timeout = null
}, 350)
},
addIndex () {
if (this.index < this.images[this.index].total - 1) {
this.$refs.images[this.index].classList.add('slideOutLeft')
var that = this
window.setTimeout(() => {
that.$emit('addIndex')
that.next = false
that.animation = true
if (this.timeout) {
clearTimeout(this.timeout)
} else {
this.$emit('addIndex')
this.next = false
this.animation = true
}
this.timeout = setTimeout(() => {
this.timeout = null
}, 350)
}
},
Expand Down Expand Up @@ -136,11 +156,6 @@
},
watch: {
index () {
this.$refs.images[this.index].classList.remove('slideInLeft', 'slideInRight', 'slideOutLeft', 'slideOutRight')
let action = this.next ? 'slideInLeft' : 'slideInRight'
if (this.animation || this.animate) {
this.$refs.images[this.index].classList.add(action)
}
this.$nextTick(() => {
if (!this.isPlay) {
this.animation = false
Expand Down Expand Up @@ -188,7 +203,6 @@
right: 0
top: 10px
.image
display: block
max-height: calc(100vh - 180px)
min-height: 200px
@media screen and (min-width:720px)
Expand Down
2 changes: 1 addition & 1 deletion src/components/gallery.vue
View file
@@ -1,6 +1,6 @@
<template>
<div class="gallery">
<div class="wrapper" v-for="(item, index) in images">
<div class="wrapper" v-for="(item, index) in images" :key="index">
<img :data-src="item.imageUrl" class="lazyload" @click="setActive(index)">
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/paginator.vue
View file
Expand Up @@ -3,7 +3,7 @@
<div v-if="index > 0" class="arrow left" @click.stop="index -= 1">
<icon :type="'arrowLeft'" :color="'#ccc'"></icon>
</div>
<div class="thumbnail-wrapper" v-for="item in activeImages" @click.stop="setActive(item.index-1)">
<div class="thumbnail-wrapper" v-for="item in activeImages" :key="item.index" @click.stop="setActive(item.index-1)">
<thumbnail :imageUrl="item.imageUrl" :class="{active: item.isActive}" v-if="!isMove"></thumbnail>
</div>
<div v-if="index < (images.length - 5)" class="arrow right" @click.stop="index += 1">
Expand Down
76 changes: 48 additions & 28 deletions src/lightbox.vue
View file
Expand Up @@ -51,6 +51,7 @@
data () {
return {
isShow: false,
direction: 'next',
index: 0,
playTimer: null,
touchPoint: {
Expand Down Expand Up @@ -83,44 +84,56 @@
nextImg () {
if (this.index < this.images.length - 1) {
this.index++
this.direction = 'next'
} else {
this.index = 0
}
},
prevImg () {
if (this.index > 0) {
this.index--
this.direction = 'prev'
}
},
changeImg (event) {
this.isShow = true
this.$refs.fancybox.next = this.index > event
this.index = event
},
keyFun (event) {
event.preventDefault()
if (this.keyinput) {
var that = this
switch (event.keyCode) {
case 27:
this.closeImg()
break
case 37:
if (this.index > 0) {
this.$refs.fancybox.$refs.images[this.index].classList.add('slideOutRight')
window.setTimeout(() => {
that.$refs.fancybox._data.next = true
that.$refs.fancybox._data.animation = true
that.prevImg()
if (this.timeout) {
clearTimeout(this.timeout)
} else {
this.$refs.fancybox.next = true
this.$refs.fancybox.animation = true
this.prevImg()
}
this.timeout = setTimeout(() => {
this.timeout = null
}, 375)
}
break
case 39:
if (this.index < this.images[this.index].total - 1) {
this.$refs.fancybox.$refs.images[this.index].classList.add('slideOutLeft')
window.setTimeout(() => {
that.$refs.fancybox._data.next = false
that.$refs.fancybox._data.animation = true
that.nextImg()
if (this.timeout) {
clearTimeout(this.timeout)
} else {
this.$refs.fancybox.next = false
this.$refs.fancybox.animation = true
this.nextImg()
}
this.timeout = setTimeout(() => {
this.timeout = null
}, 375)
}
break
Expand All @@ -134,23 +147,32 @@
wheelFun (event) {
if (this.mousescroll) {
event.stopPropagation()
var that = this
if (event.deltaY > 0) {
if (this.index < this.images[this.index].total - 1) {
this.$refs.fancybox.$refs.images[this.index].classList.add('slideOutLeft')
window.setTimeout(() => {
that.$refs.fancybox._data.next = false
that.$refs.fancybox._data.animation = true
that.nextImg()
if (this.timeout) {
clearTimeout(this.timeout)
} else {
this.$refs.fancybox.next = false
this.$refs.fancybox.animation = true
this.nextImg()
}
this.timeout = setTimeout(() => {
this.timeout = null
}, 375)
}
} else {
if (this.index > 0) {
this.$refs.fancybox.$refs.images[this.index].classList.add('slideOutRight')
window.setTimeout(() => {
that.$refs.fancybox._data.next = true
that.$refs.fancybox._data.animation = true
that.prevImg()
if (this.timeout) {
clearTimeout(this.timeout)
} else {
this.$refs.fancybox.next = true
this.$refs.fancybox.animation = true
this.prevImg()
}
this.timeout = setTimeout(() => {
this.timeout = null
}, 375)
}
}
Expand All @@ -168,19 +190,17 @@
var that = this
if (this.touchPoint.prev > this.touchPoint.now + 50) {
if (this.index < this.images[this.index].total - 1) {
this.$refs.fancybox.$refs.images[this.index].classList.add('slideOutLeft')
window.setTimeout(() => {
that.$refs.fancybox._data.next = false
that.$refs.fancybox._data.animation = true
that.$refs.fancybox.next = false
that.$refs.fancybox.animation = true
that.nextImg()
}, 375)
}
} else if (this.touchPoint.now > this.touchPoint.prev + 50) {
if (this.index > 0) {
this.$refs.fancybox.$refs.images[this.index].classList.add('slideOutRight')
window.setTimeout(() => {
that.$refs.fancybox._data.next = true
that.$refs.fancybox._data.animation = true
that.$refs.fancybox.next = true
that.$refs.fancybox.animation = true
that.prevImg()
}, 375)
}
Expand Down

0 comments on commit f4467e4

Please sign in to comment.