You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
75 lines
2.0 KiB
75 lines
2.0 KiB
// @flow |
|
import type { Position } from 'css-box-model'; |
|
import { isEqual, origin } from './state/position'; |
|
|
|
export const curves = { |
|
outOfTheWay: 'cubic-bezier(0.2, 0, 0, 1)', |
|
drop: 'cubic-bezier(.2,1,.1,1)', |
|
}; |
|
|
|
export const combine = { |
|
opacity: { |
|
// while dropping: fade out totally |
|
drop: 0, |
|
// while dragging: fade out partially |
|
combining: 0.7, |
|
}, |
|
scale: { |
|
drop: 0.75, |
|
}, |
|
}; |
|
|
|
export const timings = { |
|
outOfTheWay: 0.2, |
|
// greater than the out of the way time |
|
// so that when the drop ends everything will |
|
// have to be out of the way |
|
minDropTime: 0.33, |
|
maxDropTime: 0.55, |
|
}; |
|
|
|
// slow timings |
|
// uncomment to use |
|
// export const timings = { |
|
// outOfTheWay: 2, |
|
// // greater than the out of the way time |
|
// // so that when the drop ends everything will |
|
// // have to be out of the way |
|
// minDropTime: 3, |
|
// maxDropTime: 4, |
|
// }; |
|
|
|
const outOfTheWayTiming: string = `${timings.outOfTheWay}s ${curves.outOfTheWay}`; |
|
export const placeholderTransitionDelayTime: number = 0.1; |
|
|
|
export const transitions = { |
|
fluid: `opacity ${outOfTheWayTiming}`, |
|
snap: `transform ${outOfTheWayTiming}, opacity ${outOfTheWayTiming}`, |
|
drop: (duration: number): string => { |
|
const timing: string = `${duration}s ${curves.drop}`; |
|
return `transform ${timing}, opacity ${timing}`; |
|
}, |
|
outOfTheWay: `transform ${outOfTheWayTiming}`, |
|
placeholder: `height ${outOfTheWayTiming}, width ${outOfTheWayTiming}, margin ${outOfTheWayTiming}`, |
|
}; |
|
|
|
const moveTo = (offset: Position): ?string => |
|
isEqual(offset, origin) ? null : `translate(${offset.x}px, ${offset.y}px)`; |
|
|
|
export const transforms = { |
|
moveTo, |
|
drop: (offset: Position, isCombining: boolean) => { |
|
const translate: ?string = moveTo(offset); |
|
if (!translate) { |
|
return null; |
|
} |
|
|
|
// only transforming the translate |
|
if (!isCombining) { |
|
return translate; |
|
} |
|
|
|
// when dropping while combining we also update the scale |
|
return `${translate} scale(${combine.scale.drop})`; |
|
}, |
|
};
|
|
|