Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

fix transition delay not being applied correct

Browse Source
pull/111/head v4.0.0
Glen Cheney 8 years ago
parent 871879b912
commit 95c49edf9d
No known key found for this signature in database
GPG Key ID: 28736C2C260C298E
7 changed files with 40 additions and 55 deletions
Show Stats Download Patch File Download Diff File

2
_scss/shuffle-styles.scss
Unescape Escape View File

@ -75,7 +75,7 @@ $itemHeight: 220px;
} }
} }
@supports (filter: blur(1px)) { @supports (filter: blur(1px)) and (clip-path: inset(0 0 0 0)) {
.picture-item--overlay { .picture-item--overlay {

2
css/shuffle-styles.css
Unescape Escape View File

@ -53,7 +53,7 @@
overflow: hidden; } overflow: hidden; }
.picture-item--overlay .picture-item__description { .picture-item--overlay .picture-item__description {
display: none; } display: none; }
@supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) { @supports ((-webkit-filter: blur(1px)) or (filter: blur(1px))) and ((-webkit-clip-path: inset(0 0 0 0)) or (clip-path: inset(0 0 0 0))) {
.picture-item--overlay .picture-item__blur { .picture-item--overlay .picture-item__blur {
position: absolute; position: absolute;
z-index: 1; z-index: 1;

53
dist/shuffle.js vendored
Unescape Escape View File

@ -696,6 +696,7 @@ return /******/ (function(modules) { // webpackBootstrap
var pos = _this3._getItemPosition(itemSize); var pos = _this3._getItemPosition(itemSize);
function callback() { function callback() {
item.element.style.transitionDelay = '';
item.applyCss(_shuffleItem2.default.Css.VISIBLE.after); item.applyCss(_shuffleItem2.default.Css.VISIBLE.after);
} }
@ -709,8 +710,10 @@ return /******/ (function(modules) { // webpackBootstrap
item.point = pos; item.point = pos;
item.scale = _shuffleItem2.default.Scale.VISIBLE; item.scale = _shuffleItem2.default.Scale.VISIBLE;
var styles = _shuffleItem2.default.Css.VISIBLE.before; // Use xtend here to clone the object so that the `before` object isn't
styles.transitionDelay = _this3._getStaggerAmount(count); // modified when the transition delay is added.
var styles = (0, _xtend2.default)(_shuffleItem2.default.Css.VISIBLE.before);
styles.transitionDelay = _this3._getStaggerAmount(count) + 'ms';
_this3._queue.push({ _this3._queue.push({
item: item, item: item,
@ -774,8 +777,8 @@ return /******/ (function(modules) { // webpackBootstrap
item.scale = _shuffleItem2.default.Scale.HIDDEN; item.scale = _shuffleItem2.default.Scale.HIDDEN;
var styles = _shuffleItem2.default.Css.HIDDEN.before; var styles = (0, _xtend2.default)(_shuffleItem2.default.Css.HIDDEN.before);
styles.transitionDelay = _this4._getStaggerAmount(count); styles.transitionDelay = _this4._getStaggerAmount(count) + 'ms';
_this4._queue.push({ _this4._queue.push({
item: item, item: item,
@ -853,7 +856,6 @@ return /******/ (function(modules) { // webpackBootstrap
key: '_whenTransitionDone', key: '_whenTransitionDone',
value: function _whenTransitionDone(element, itemCallback, done) { value: function _whenTransitionDone(element, itemCallback, done) {
var id = (0, _onTransitionEnd.onTransitionEnd)(element, function (evt) { var id = (0, _onTransitionEnd.onTransitionEnd)(element, function (evt) {
evt.currentTarget.style.transitionDelay = '';
itemCallback(); itemCallback();
done(null, evt); done(null, evt);
}); });
@ -888,29 +890,18 @@ return /******/ (function(modules) { // webpackBootstrap
}, { }, {
key: '_processQueue', key: '_processQueue',
value: function _processQueue() { value: function _processQueue() {
var _this6 = this;
if (this.isTransitioning) { if (this.isTransitioning) {
this._cancelMovement(); this._cancelMovement();
} }
var hasSpeed = this.options.speed > 0; var hasSpeed = this.options.speed > 0;
var hasQueue = this._queue.length > 0;
// Iterate over the queue and keep track of ones that use transitions. if (hasQueue && hasSpeed && this.isInitialized) {
var immediates = []; this._startTransitions(this._queue);
var transitions = []; } else if (hasQueue) {
this._queue.forEach(function (obj) { this._styleImmediately(this._queue);
if (_this6.isInitialized && hasSpeed) { this._dispatchLayout();
transitions.push(obj);
} else {
immediates.push(obj);
}
});
this._styleImmediately(immediates);
if (transitions.length > 0) {
this._startTransitions(transitions);
// A call to layout happened, but none of the newly visible items will // A call to layout happened, but none of the newly visible items will
// change position or the transition duration is zero, which will not trigger // change position or the transition duration is zero, which will not trigger
@ -931,14 +922,14 @@ return /******/ (function(modules) { // webpackBootstrap
}, { }, {
key: '_startTransitions', key: '_startTransitions',
value: function _startTransitions(transitions) { value: function _startTransitions(transitions) {
var _this7 = this; var _this6 = this;
// Set flag that shuffle is currently in motion. // Set flag that shuffle is currently in motion.
this.isTransitioning = true; this.isTransitioning = true;
// Create an array of functions to be called. // Create an array of functions to be called.
var callbacks = transitions.map(function (obj) { var callbacks = transitions.map(function (obj) {
return _this7._getTransitionFunction(obj); return _this6._getTransitionFunction(obj);
}); });
(0, _arrayParallel2.default)(callbacks, this._movementFinished.bind(this)); (0, _arrayParallel2.default)(callbacks, this._movementFinished.bind(this));
@ -965,7 +956,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, { }, {
key: '_styleImmediately', key: '_styleImmediately',
value: function _styleImmediately(objects) { value: function _styleImmediately(objects) {
var _this8 = this; var _this7 = this;
if (objects.length) { if (objects.length) {
var elements = objects.map(function (obj) { var elements = objects.map(function (obj) {
@ -974,7 +965,7 @@ return /******/ (function(modules) { // webpackBootstrap
Shuffle._skipTransitions(elements, function () { Shuffle._skipTransitions(elements, function () {
objects.forEach(function (obj) { objects.forEach(function (obj) {
obj.item.applyCss(_this8._getStylesForTransition(obj)); obj.item.applyCss(_this7._getStylesForTransition(obj));
obj.callback(); obj.callback();
}); });
}); });
@ -1146,7 +1137,7 @@ return /******/ (function(modules) { // webpackBootstrap
}, { }, {
key: 'remove', key: 'remove',
value: function remove(collection) { value: function remove(collection) {
var _this9 = this; var _this8 = this;
if (!collection.length) { if (!collection.length) {
return; return;
@ -1155,21 +1146,21 @@ return /******/ (function(modules) { // webpackBootstrap
collection = (0, _arrayUniq2.default)(collection); collection = (0, _arrayUniq2.default)(collection);
var oldItems = collection.map(function (element) { var oldItems = collection.map(function (element) {
return _this9.getItemByElement(element); return _this8.getItemByElement(element);
}).filter(function (item) { }).filter(function (item) {
return !!item; return !!item;
}); });
var handleLayout = function handleLayout() { var handleLayout = function handleLayout() {
_this9.element.removeEventListener(Shuffle.EventType.LAYOUT, handleLayout); _this8.element.removeEventListener(Shuffle.EventType.LAYOUT, handleLayout);
_this9._disposeItems(oldItems); _this8._disposeItems(oldItems);
// Remove the collection in the callback // Remove the collection in the callback
collection.forEach(function (element) { collection.forEach(function (element) {
element.parentNode.removeChild(element); element.parentNode.removeChild(element);
}); });
_this9._dispatch(Shuffle.EventType.REMOVED, { collection: collection }); _this8._dispatch(Shuffle.EventType.REMOVED, { collection: collection });
// Let it get garbage collected // Let it get garbage collected
collection = null; collection = null;

2
dist/shuffle.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/shuffle.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/shuffle.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

32
src/shuffle.js
Unescape Escape View File

@ -497,6 +497,7 @@ class Shuffle {
var pos = this._getItemPosition(itemSize); var pos = this._getItemPosition(itemSize);
function callback() { function callback() {
item.element.style.transitionDelay = '';
item.applyCss(ShuffleItem.Css.VISIBLE.after); item.applyCss(ShuffleItem.Css.VISIBLE.after);
} }
@ -510,8 +511,10 @@ class Shuffle {
item.point = pos; item.point = pos;
item.scale = ShuffleItem.Scale.VISIBLE; item.scale = ShuffleItem.Scale.VISIBLE;
let styles = ShuffleItem.Css.VISIBLE.before; // Use xtend here to clone the object so that the `before` object isn't
styles.transitionDelay = this._getStaggerAmount(count); // modified when the transition delay is added.
let styles = xtend(ShuffleItem.Css.VISIBLE.before);
styles.transitionDelay = this._getStaggerAmount(count) + 'ms';
this._queue.push({ this._queue.push({
item, item,
@ -565,8 +568,8 @@ class Shuffle {
item.scale = ShuffleItem.Scale.HIDDEN; item.scale = ShuffleItem.Scale.HIDDEN;
let styles = ShuffleItem.Css.HIDDEN.before; let styles = xtend(ShuffleItem.Css.HIDDEN.before);
styles.transitionDelay = this._getStaggerAmount(count); styles.transitionDelay = this._getStaggerAmount(count) + 'ms';
this._queue.push({ this._queue.push({
item, item,
@ -632,7 +635,6 @@ class Shuffle {
*/ */
_whenTransitionDone(element, itemCallback, done) { _whenTransitionDone(element, itemCallback, done) {
let id = onTransitionEnd(element, (evt) => { let id = onTransitionEnd(element, (evt) => {
evt.currentTarget.style.transitionDelay = '';
itemCallback(); itemCallback();
done(null, evt); done(null, evt);
}); });
@ -664,22 +666,14 @@ class Shuffle {
} }
let hasSpeed = this.options.speed > 0; let hasSpeed = this.options.speed > 0;
let hasQueue = this._queue.length > 0;
// Iterate over the queue and keep track of ones that use transitions. if (hasQueue && hasSpeed && this.isInitialized) {
let immediates = []; this._startTransitions(this._queue);
let transitions = [];
this._queue.forEach((obj) => {
if (this.isInitialized && hasSpeed) {
transitions.push(obj);
} else {
immediates.push(obj);
}
});
this._styleImmediately(immediates); } else if (hasQueue) {
this._styleImmediately(this._queue);
if (transitions.length > 0) { this._dispatchLayout();
this._startTransitions(transitions);
// A call to layout happened, but none of the newly visible items will // A call to layout happened, but none of the newly visible items will
// change position or the transition duration is zero, which will not trigger // change position or the transition duration is zero, which will not trigger

Write Preview
Loading…
Cancel
Save