export default function flyTo(opts={}) {
if (!this.newElement) {
return Promise.resolve();
} else if (!this.oldElement) {
this.newElement.css({visibility: ''});
return Promise.resolve();
}
let oldOffset = this.oldElement.offset();
let newOffset = this.newElement.offset();
if (opts.movingSide === 'new') {
let motion = {
translateX: [0, oldOffset.left - newOffset.left],
translateY: [0, oldOffset.top - newOffset.top],
outerWidth: [this.newElement.outerWidth(), this.oldElement.outerWidth()],
outerHeight: [this.newElement.outerHeight(), this.oldElement.outerHeight()]
};
this.oldElement.css({ visibility: 'hidden' });
return animate(this.newElement, motion, opts);
} else {
let motion = {
translateX: newOffset.left - oldOffset.left,
translateY: newOffset.top - oldOffset.top,
outerWidth: this.newElement.outerWidth(),
outerHeight: this.newElement.outerHeight()
};
this.newElement.css({ visibility: 'hidden' });
return animate(this.oldElement, motion, opts).then(() => {
this.newElement.css({ visibility: ''});
});
}
}
export default function crossFade(opts={}) {
stop(this.oldElement);
return Promise.all([
animate(this.oldElement, {opacity: 0}, opts),
animate(this.newElement, {opacity: [(opts.maxOpacity || 1), 0]}, opts)
]);
}
export default function flash(_maxOpacity = 1, _inOpts = {}, _outOpts = {}) {
const maxOpacity = _maxOpacity > 0 ? _maxOpacity : 1;
const inOpts = assign({}, DEFAULT_IN_OPTS, _inOpts);
const outOpts = assign({}, DEFAULT_OUT_OPTS, _outOpts);
const flashIn = animate(this.newElement, { opacity: maxOpacity }, inOpts);
const flashOut = animate(this.newElement, { opacity: 0 }, outOpts);
return flashIn.then(flashOut);
}
return firstStep.then(() => {
var bigger = biggestSize(this, measure);
oldParams[property] = (bigger * direction) + 'px';
newParams[property] = ["0px", (-1 * bigger * direction) + 'px'];
return Promise.all([
animate(this.oldElement, oldParams, opts),
animate(this.newElement, newParams, opts, 'moving-in')
]);
});
return insertNewView().then(function(newView) {
if (oldView) {
oldView.$().css('transform-origin', '50% 150%');
}
if (newView) {
newView.$().css('transform-origin', '50% 150%');
}
return Promise.all([
animate(oldView, { rotateZ: -90*direction + 'deg' }, opts),
animate(newView, { rotateZ: ['0deg', 90*direction+'deg'] }, opts)
]);
});
export default function rotateBelow() {
stop(this.oldElement);
if (this.oldElement) {
this.oldElement.css('transform-origin', '70% 200%');
}
if (this.newElement) {
this.newElement.css('transform-origin', '70% 200%');
}
return Promise.all([
animate(this.oldElement, { rotateZ: -90 + 'deg', opacity: [0, 1] }),
animate(this.newElement, { rotateZ: ['0deg', 90 + 'deg'] })
]);
}
export default function (opts={}) {
var nav = this.oldElement.find('nav');
var bottomNav = this.oldElement.find('.bottom-nav');
var content = this.oldElement.find('> .container-fluid');
var navHeight = parseInt(nav.css('height'), 10);
return Promise.all([
animate(nav, { translateY: -1 * navHeight + 'px' }, { easing: 'easeInQuart' }),
animate(bottomNav, { translateY: navHeight + 'px' }, { easing: 'easeInQuart' }),
animate(content, { opacity: 0 }, { easing: 'easeInQuart' })
]).then(() => {
return animate(this.newElement, { scaleX: [1, 0], scaleY: [1, 0], opacity: 1 }, { easing: 'easeOutQuart' });
});
}
return firstStep.then(() => {
var bigger = biggestSize(this, measure);
this.oldElement[0].style.zIndex = direction > 0 ? 5 : 0;
this.newElement[0].style.zIndex = direction > 0 ? 0 : 5;
oldParams[property] = (bigger * (direction > 0 ? 1 : -0.5)) + 'px';
newParams[property] = ["0px", (bigger * (direction > 0 ? -0.5 : 1)) + 'px'];
return Promise.all([
animate(overlay, overlayParams, opts),
animate(this.oldElement, oldParams, opts),
animate(this.newElement, newParams, opts, 'moving-in')
]).then(() => overlay.remove());
});
export default function scale(opts={}) {
var transition = this;
return animate(transition.oldElement, {scale: [0.9, 1]}, opts)
.then(function() {
return animate(transition.newElement, {scale: [1, 0.9]}, opts);
});
}
export default function fade(dimension, direction, opts, offset=20) {
const oldParams = { opacity: 0 },
newParams = { opacity: [(opts.maxOpacity || 1), 0] },
fadingElement = findFadingElement(this);
let outOpts = opts,
firstStep;
if (dimension.toLowerCase() === 'x') {
oldParams.translateX = `${(direction * offset)}px`;
newParams.translateX = ['0px', `${(direction * offset)}px`];
} else {
oldParams.translateY = `${(direction * offset)}px`;
newParams.translateY = ['0px', `${(direction * offset)}px`];
}
if (fadingElement) {
// We still have some older version that is in the process of
// fading out, so out first step is waiting for it to finish.
firstStep = finish(fadingElement, 'fade-out');
} else {
if (isAnimating(this.oldElement, 'fade-in')) {
// if the previous view is partially faded in, scale its
// fade-out duration appropriately.
outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
}
stop(this.oldElement);
firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
}
return firstStep.then(() => {
return animate(this.newElement, newParams, opts, 'fade-in');
});
}
this.use(function(oldView, insertNewView, opts) {
stop(oldView);
return animate(oldView, {opacity: 0}, opts)
.then(insertNewView)
.then(function(newView){
return animate(newView, {opacity: [1, 0]}, opts);
});
})
export default function rotateBelow(opts={}) {
var direction = 1;
if (opts.direction === 'cw') {
direction = -1;
}
stop(this.oldElement);
if (this.oldElement) {
this.oldElement.css('transform-origin', '50% 150%');
}
if (this.newElement) {
this.newElement.css('transform-origin', '50% 150%');
}
return Promise.all([
animate(this.oldElement, { rotateZ: -90*direction + 'deg' }, opts),
animate(this.newElement, { rotateZ: ['0deg', 90*direction+'deg'] }, opts),
]);
}
export default function wipe() {
stop(this.oldElement);
if (this.oldElement) {
this.oldElement.css({
'overflow': 'hidden',
'minHeight': '100vh',
'height': '100vh',
'backgroundColor': '#ffffff',
'zIndex': 1000
});
}
if (this.newElement) {
this.newElement.css({
opacity: 1
});
}
return Promise.all([
animate(this.oldElement, {minHeight: 0, height: '0' }, {duration: 400}),
animate(this.newElement, {opacity: [1, 1]}, {duration: 1}),
]);
}
_adaptDimension: function(dimension, before, after) {
if (before[dimension] === after[dimension] || !this.get('enableGrowth')) {
var elt = this.$();
if (elt) {
elt[dimension](after[dimension]);
}
return Promise.resolve();
} else {
// Velocity deals in literal width/height, whereas jQuery deals
// in box-sizing-dependent measurements.
var target = {};
target[dimension] = [
after['literal'+capitalize(dimension)],
before['literal'+capitalize(dimension)],
];
return animate(this, target, {
duration: this._durationFor(before[dimension], after[dimension]),
queue: false,
easing: this.get('growEasing')
});
}
},
export default function fade(opts={}) {
var firstStep;
var outOpts = opts;
var fadingElement = findFadingElement(this);
if (fadingElement) {
// We still have some older version that is in the process of
// fading out, so out first step is waiting for it to finish.
firstStep = finish(fadingElement, 'fade-out');
} else {
if (isAnimating(this.oldElement, 'fade-in')) {
// if the previous view is partially faded in, scale its
// fade-out duration appropriately.
outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
}
stop(this.oldElement);
firstStep = animate(this.oldElement, {opacity: 0}, outOpts, 'fade-out');
}
return firstStep.then(() => {
return animate(this.newElement, {opacity: [(opts.maxOpacity || 1), 0]}, opts, 'fade-in');
});
}
export default function(opts={}) {
const fadingElement = findFadingElement(this);
let firstStep;
let outOpts = opts;
let $w = $('.wrap');
if ($w.hasClass('add-transition')) {
$w.removeClass('add-transition');
}
if ($w.hasClass('loaded')) {
$w.removeClass('loaded');
}
if (fadingElement) {
// We still have some older version that is in the process of
// fading out, so out first step is waiting for it to finish.
firstStep = finish(fadingElement, 'dino');
} else {
if (isAnimating(this.oldElement, 'dino')) {
// if the previous view is partially faded in, scale its
// dindinoo-in duration appropriately.
outOpts = { duration: timeSpent(this.oldElement, 'dino') };
}
stop(this.oldElement);
firstStep = animate(this.oldElement, {opacity: 1}, {duration: 1}, 'dino');
}
return firstStep.then(() => {
run.later(function () {
$w.addClass('add-transition loaded');
}, 300);
return animate(this.newElement, {opacity: 1}, {duration: 1}, 'dino');
});
}
.then(function(newView){
return animate(newView, {opacity: [1, 0]}, opts);
});
.then(function() {
return animate(transition.newElement, {scale: [1, 0.9]}, opts);
});
return firstStep.then(() => {
run.later(function () {
$w.addClass('add-transition loaded');
}, 300);
return animate(this.newElement, {opacity: 1}, {duration: 1}, 'dino');
});
]).then(() => {
return animate(this.newElement, { scaleX: [1, 0], scaleY: [1, 0], opacity: 1 }, { easing: 'easeOutQuart' });
});
export default function scale(opts={}) {
let quantity = .3
return Promise.all([animate(this.oldElement, {scale: [1-quantity, 1], opacity: [0.1, 1]}, opts),
animate(this.newElement, {scale: [1, 1+quantity],opacity: [1, 0.1]}, opts)]);
}
return firstStep.then(() => {
return animate(this.newElement, newParams, opts, 'fade-in');
});
return insertNewView().then(function(newView) {
return Promise.all([
animate(oldView, {opacity: 0}, opts),
animate(newView, {opacity: [1, 0]}, opts)
]);
});
export default function(/*options*/) {
stop(this.oldElement);
const animations = Ember.A([]);
const oldPrevious = $(this.oldElement).find('.ui-panel--ios-titlebar-action--label--previous');
const oldPreviousIcon = $(this.oldElement).find('.ui-panel--ios-titlebar-action--icon');
const oldTitle = $(this.oldElement).find('.ui-panel--ios-titlebar-title');
const oldAction = $(this.oldElement).find('.ui-panel--ios-titlebar-action--label--action');
const oldContent = $(this.oldElement).find('.ui-panel--ios-content');
animations.pushObject(animate(oldPrevious, {
opacity: 0,
translateX: ['-30vw', '0vw']
}, {
duration: 500
}));
animations.pushObject(animate(oldPreviousIcon, {
opacity: 0
}, {
duration: 500
}));
animations.pushObject(animate(oldTitle, {
opacity: 0,
translateX: ['-30vw', '0vw']
}, {
duration: 500
}));
animations.pushObject(animate(oldContent, {
opacity: 0,
translateX: ['-100vw', '0vw']
}, {
duration: 500
}));
animations.pushObject(animate(oldAction, {
opacity: 0
}, {
duration: 500
}));
const newPrevious = $(this.newElement).find('.ui-panel--ios-titlebar-action--label--previous');
const newPreviousIcon = $(this.newElement).find('.ui-panel--ios-titlebar-action--icon');
const newTitle = $(this.newElement).find('.ui-panel--ios-titlebar-title');
const newAction = $(this.newElement).find('.ui-panel--ios-titlebar-action--label--action');
const newContent = $(this.newElement).find('.ui-panel--ios-content');
animations.pushObject(animate(this.newElement, { opacity: 1 }, { duration: 0 }));
animations.pushObject(animate(newPrevious, {
opacity: 1,
translateX: ['0vw', '30vw']
}, {
duration: 500
}));
animations.pushObject(animate(newPreviousIcon, {
opacity: 1
}, {
duration: 500
}));
animations.pushObject(animate(newTitle, {
opacity: 1,
translateX: ['0vw', '30vw']
}, {
duration: 500
}));
animations.pushObject(animate(newContent, {
opacity: 1,
translateX: ['0vw', '100vw']
}, {
duration: 500
}));
animations.pushObject(animate(newAction, {
opacity: 1,
translateX: '0px'
}, {
duration: 500
}));
return Ember.RSVP.all(animations);
}
return firstStep.then(() => {
return animate(this.newElement, {opacity: [(opts.maxOpacity || 1), 0]}, opts, 'fade-in');
});