export default function Transitioner(prev, next, dir, {animation, easing}) {
const {percent, translate, show = noop} = animation;
const props = show(dir);
const deferred = new Deferred();
return {
dir,
show(duration, percent = 0, linear) {
const timing = linear ? 'linear' : easing;
duration -= Math.round(duration * clamp(percent, -1, 1));
this.translate(percent);
triggerUpdate(next, 'itemin', {percent, duration, timing, dir});
triggerUpdate(prev, 'itemout', {percent: 1 - percent, duration, timing, dir});
Promise.all([
Transition.start(next, props[1], duration, timing),
Transition.start(prev, props[0], duration, timing)
]).then(() => {
this.reset();
deferred.resolve();
}, noop);
return deferred.promise;
},
stop() {
return Transition.stop([next, prev]);
},
cancel() {
Transition.cancel([next, prev]);
},
reset() {
for (const prop in props[0]) {
css([next, prev], prop, '');
}
},
forward(duration, percent = this.percent()) {
Transition.cancel([next, prev]);
return this.show(duration, percent, true);
},
translate(percent) {
this.reset();
const props = translate(percent, dir);
css(next, props[1]);
css(prev, props[0]);
triggerUpdate(next, 'itemtranslatein', {percent, dir});
triggerUpdate(prev, 'itemtranslateout', {percent: 1 - percent, dir});
},
percent() {
return percent(prev || next, next, dir);
},
getDistance() {
return prev.offsetWidth;
}
};
}
},
transitionTo(newHeight, el) {
const {dropbar} = this;
const oldHeight = isVisible(dropbar) ? height(dropbar) : 0;
el = oldHeight < newHeight && el;
css(el, 'clip', `rect(0,${el.offsetWidth}px,${oldHeight}px,0)`);
height(dropbar, oldHeight);
Transition.cancel([el, dropbar]);
return Promise.all([
Transition.start(dropbar, {height: newHeight}, this.duration),
Transition.start(el, {clip: `rect(0,${el.offsetWidth}px,${newHeight}px,0)`}, this.duration)
])
.catch(noop)
.then(() => {
css(el, {clip: ''});
this.$update(dropbar);
});
},
getDropdown(el) {
return this.$getComponent(el, 'drop') || this.$getComponent(el, 'dropdown');
}
}
};
this._transitioner = this._getTransitioner(
prev,
next,
this.dir,
assign({
easing: force
? next.offsetWidth < 600
? 'cubic-bezier(0.25, 0.46, 0.45, 0.94)' /* easeOutQuad */
: 'cubic-bezier(0.165, 0.84, 0.44, 1)' /* easeOutQuart */
: this.easing
}, this.transitionOptions)
);
if (!force && !prev) {
this._transitioner.translate(1);
return Promise.resolve();
}
const {length} = this.stack;
return this._transitioner[length > 1 ? 'forward' : 'show'](length > 1 ? Math.min(this.duration, 75 + 75 / (length - 1)) : this.duration, this.percent);
},
_getDistance(prev, next) {
return new this._getTransitioner(prev, prev !== next && next).getDistance();
},
_translate(percent, prev = this.prevIndex, next = this.index) {
const transitioner = this._getTransitioner(prev !== next ? prev : false, next);
transitioner.translate(percent);
return transitioner;