arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed the swipe animation

Browse Source
This commit is contained in:
Tobias Reich 2016-01-06 17:19:23 +01:00
parent d1bd819db9
commit dce837171b
6 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

4
src/scripts/init.js
View File

@ -78,7 +78,7 @@ $(document).ready(function() {
$(document) $(document)
// Fullscreen on mobile // Fullscreen on mobile
.on('touchend', '#image', function(e) { .on('touchend', '#imageview #image', function(e) {
if (swipe.obj==null || (swipe.offset>=-5&&swipe.offset<=5)) { if (swipe.obj==null || (swipe.offset>=-5&&swipe.offset<=5)) {
if (visible.header()) header.hide(e, 0) if (visible.header()) header.hide(e, 0)
else header.show() else header.show()
@ -86,7 +86,7 @@ $(document).ready(function() {
}) })
// Swipe on mobile // Swipe on mobile
.swipe().on('swipeStart', function() { if (visible.photo()) swipe.start($('#image')) }) .swipe().on('swipeStart', function() { if (visible.photo()) swipe.start($('#imageview #image')) })
.swipe().on('swipeMove', function(e) { if (visible.photo()) swipe.move(e.swipe) }) .swipe().on('swipeMove', function(e) { if (visible.photo()) swipe.move(e.swipe) })
.swipe().on('swipeEnd', function(e) { if (visible.photo()) swipe.stop(e.swipe, photo.previous, photo.next) }) .swipe().on('swipeEnd', function(e) { if (visible.photo()) swipe.stop(e.swipe, photo.previous, photo.next) })

4
src/scripts/photo.js
View File

@ -100,7 +100,7 @@ photo.previous = function(animate) {
delay = 200 delay = 200
$('#image').css({ $('#imageview #image').css({
WebkitTransform : 'translateX(100%)', WebkitTransform : 'translateX(100%)',
MozTransform : 'translateX(100%)', MozTransform : 'translateX(100%)',
transform : 'translateX(100%)', transform : 'translateX(100%)',
@ -131,7 +131,7 @@ photo.next = function(animate) {
delay = 200 delay = 200
$('#image').css({ $('#imageview #image').css({
WebkitTransform : 'translateX(-100%)', WebkitTransform : 'translateX(-100%)',
MozTransform : 'translateX(-100%)', MozTransform : 'translateX(-100%)',
transform : 'translateX(-100%)', transform : 'translateX(-100%)',

17
src/scripts/swipe.js
View File

@ -36,14 +36,25 @@ swipe.move = function(e) {
swipe.stop = function(e, left, right) { swipe.stop = function(e, left, right) {
if (e.x<=-swipe.tolerance) left(true) // Only execute once
else if (e.x>=swipe.tolerance) right(true) if (swipe.obj==null) return false
else if (swipe.obj!==null) {
if (e.x<=-swipe.tolerance) {
left(true)
} else if (e.x>=swipe.tolerance) {
right(true)
} else {
swipe.obj.css({ swipe.obj.css({
WebkitTransform : 'translateX(0px)', WebkitTransform : 'translateX(0px)',
MozTransform : 'translateX(0px)', MozTransform : 'translateX(0px)',
transform : 'translateX(0px)' transform : 'translateX(0px)'
}) })
} }
swipe.obj = null swipe.obj = null

2
src/styles/_imageview.scss
View File

@ -21,7 +21,7 @@
right: 30px; right: 30px;
bottom: 30px; bottom: 30px;
left: 30px; left: 30px;
transition: top .3s, right .3s, bottom .3s, left .3s; transition: top .3s, right .3s, bottom .3s, left .3s, opacity .2s, transform .2s;
will-change: transform; will-change: transform;
display: flex; display: flex;