Skip to content

Commit

Permalink
add transition to resize event
Browse files Browse the repository at this point in the history
  • Loading branch information
@ganlanyuan
ganlanyuan committed Nov 28, 2016
1 parent 32e3515 commit 645c438
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 20 deletions.
2 changes: 1 addition & 1 deletion dist/min/tiny-slider.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/min/tiny-slider.native.js
View file

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions dist/tiny-slider.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 10 additions & 6 deletions dist/tiny-slider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -774,7 +774,8 @@ var tns = (function () {
})();

var getSlideWidth = function () {
return Math.round((vw + gutter) / items);
return (vw + gutter) / items;
// return Math.round((vw + gutter) / items);
};

var getVisibleNavCount = (function () {
Expand Down Expand Up @@ -893,7 +894,7 @@ var tns = (function () {
attr = attrLegacy;
}

container.style[attr] = prefix + distance + 'px' + postfix;
container.style[attr] = prefix + Math.round(distance) + 'px' + postfix;
}
}

Expand All @@ -917,6 +918,7 @@ var tns = (function () {

// add aria-hidden attribute
setAttrs(item, {'aria-hidden': 'true'});
if (TRANSITIONDURATION) { setDurations(1, item); }

// set slide width & gutter
var gutterPosition = (axis === 'horizontal') ? 'right' : 'bottom',
Expand Down Expand Up @@ -1104,7 +1106,9 @@ var tns = (function () {
if (nested === 'inner') {
events.on('outerResized', function () {
resizeTasks();
events.emit('innerLoaded', info());
setTimeout(function () {
events.emit('innerLoaded', info());
}, (TRANSITIONDURATION)? speed : 0);
});
} else {
addEvents(window, ['resize', onResize]);
Expand Down Expand Up @@ -1400,7 +1404,7 @@ var tns = (function () {
attr = attrLegacy;
}

container.style[attr] = prefix + distance + 'px' + postfix;
container.style[attr] = prefix + Math.round(distance) + 'px' + postfix;

if (axis === 'vertical') { contentWrapper.style.height = getVerticalWrapperHeight() + 'px'; }
};
Expand Down Expand Up @@ -1851,7 +1855,7 @@ var tns = (function () {
updateNavStatus();
}

if (index !== indexTem || mode === 'carousel' && !fixedWidth) { doTransform(0); }
if (index !== indexTem || mode === 'carousel' && !fixedWidth) { doTransform(1); }
if (autoHeight && !nested) { runAutoHeight(); }
if (lazyload && index !== indexTem || items !== itemsTem) { lazyLoad(); }

Expand All @@ -1863,7 +1867,7 @@ var tns = (function () {
resizeTimer = setTimeout(function () {
if (vw !== getViewWidth()) {
resizeTasks();
if (nested === 'outer') { events.emit('outerResized', info(e)); }
if (nested === 'outer') { setTimeout(function(){ events.emit('outerResized', info(e)); }, (TRANSITIONDURATION)? speed : 0); }
}
}, 100); // update after stop resizing for 100 ms
}
Expand Down
16 changes: 10 additions & 6 deletions dist/tiny-slider.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,8 @@ var tns = (function () {
})();

var getSlideWidth = function () {
return Math.round((vw + gutter) / items);
return (vw + gutter) / items;
// return Math.round((vw + gutter) / items);
};

var getVisibleNavCount = (function () {
Expand Down Expand Up @@ -323,7 +324,7 @@ var tns = (function () {
attr = attrLegacy;
}

container.style[attr] = prefix + distance + 'px' + postfix;
container.style[attr] = prefix + Math.round(distance) + 'px' + postfix;
}
}

Expand All @@ -347,6 +348,7 @@ var tns = (function () {

// add aria-hidden attribute
setAttrs(item, {'aria-hidden': 'true'});
if (TRANSITIONDURATION) { setDurations(1, item); }

// set slide width & gutter
var gutterPosition = (axis === 'horizontal') ? 'right' : 'bottom',
Expand Down Expand Up @@ -534,7 +536,9 @@ var tns = (function () {
if (nested === 'inner') {
events.on('outerResized', function () {
resizeTasks();
events.emit('innerLoaded', info());
setTimeout(function () {
events.emit('innerLoaded', info());
}, (TRANSITIONDURATION)? speed : 0);
});
} else {
addEvents(window, ['resize', onResize]);
Expand Down Expand Up @@ -830,7 +834,7 @@ var tns = (function () {
attr = attrLegacy;
}

container.style[attr] = prefix + distance + 'px' + postfix;
container.style[attr] = prefix + Math.round(distance) + 'px' + postfix;

if (axis === 'vertical') { contentWrapper.style.height = getVerticalWrapperHeight() + 'px'; }
};
Expand Down Expand Up @@ -1281,7 +1285,7 @@ var tns = (function () {
updateNavStatus();
}

if (index !== indexTem || mode === 'carousel' && !fixedWidth) { doTransform(0); }
if (index !== indexTem || mode === 'carousel' && !fixedWidth) { doTransform(1); }
if (autoHeight && !nested) { runAutoHeight(); }
if (lazyload && index !== indexTem || items !== itemsTem) { lazyLoad(); }

Expand All @@ -1293,7 +1297,7 @@ var tns = (function () {
resizeTimer = setTimeout(function () {
if (vw !== getViewWidth()) {
resizeTasks();
if (nested === 'outer') { events.emit('outerResized', info(e)); }
if (nested === 'outer') { setTimeout(function(){ events.emit('outerResized', info(e)); }, (TRANSITIONDURATION)? speed : 0); }
}
}, 100); // update after stop resizing for 100 ms
}
Expand Down
16 changes: 10 additions & 6 deletions src/tiny-slider.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,8 @@ var tns = (function () {
})();

var getSlideWidth = function () {
return Math.round((vw + gutter) / items);
return (vw + gutter) / items;
// return Math.round((vw + gutter) / items);
};

var getVisibleNavCount = (function () {
Expand Down Expand Up @@ -323,7 +324,7 @@ var tns = (function () {
attr = attrLegacy;
}

container.style[attr] = prefix + distance + 'px' + postfix;
container.style[attr] = prefix + Math.round(distance) + 'px' + postfix;
}
}

Expand All @@ -347,6 +348,7 @@ var tns = (function () {

// add aria-hidden attribute
setAttrs(item, {'aria-hidden': 'true'});
if (TRANSITIONDURATION) { setDurations(1, item); }

// set slide width & gutter
var gutterPosition = (axis === 'horizontal') ? 'right' : 'bottom',
Expand Down Expand Up @@ -534,7 +536,9 @@ var tns = (function () {
if (nested === 'inner') {
events.on('outerResized', function () {
resizeTasks();
events.emit('innerLoaded', info());
setTimeout(function () {
events.emit('innerLoaded', info());
}, (TRANSITIONDURATION)? speed : 0);
});
} else {
addEvents(window, ['resize', onResize]);
Expand Down Expand Up @@ -830,7 +834,7 @@ var tns = (function () {
attr = attrLegacy;
}

container.style[attr] = prefix + distance + 'px' + postfix;
container.style[attr] = prefix + Math.round(distance) + 'px' + postfix;

if (axis === 'vertical') { contentWrapper.style.height = getVerticalWrapperHeight() + 'px'; }
};
Expand Down Expand Up @@ -1281,7 +1285,7 @@ var tns = (function () {
updateNavStatus();
}

if (index !== indexTem || mode === 'carousel' && !fixedWidth) { doTransform(0); }
if (index !== indexTem || mode === 'carousel' && !fixedWidth) { doTransform(1); }
if (autoHeight && !nested) { runAutoHeight(); }
if (lazyload && index !== indexTem || items !== itemsTem) { lazyLoad(); }

Expand All @@ -1293,7 +1297,7 @@ var tns = (function () {
resizeTimer = setTimeout(function () {
if (vw !== getViewWidth()) {
resizeTasks();
if (nested === 'outer') { events.emit('outerResized', info(e)); }
if (nested === 'outer') { setTimeout(function(){ events.emit('outerResized', info(e)); }, (TRANSITIONDURATION)? speed : 0); }
}
}, 100); // update after stop resizing for 100 ms
}
Expand Down
5 changes: 5 additions & 0 deletions src/tiny-slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,11 @@
-webkit-transition: all 0s;
-moz-transition: all 0s;
transition: all 0s;
> div {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
}
[data-tns-mode="carousel"][data-tns-axis="horizontal"] {
left: 0;
Expand Down

0 comments on commit 645c438

Please sign in to comment.