2a5bac2bb3
* major JSDoc write up * removed ESLint `no-bitwise` exception, it only applies to specific functions and not the entire code * the `SVGCubicMorph` component will remove un-necessary `Z` path commands when is the case for better out of the box animation * fixed a minor disambiguation with `filterEffects` and `drop-shadow` property and its `dropshadow` interpolation function * TypeScript strong: all files are modules, easy to implement in any third party app * updated `CubicBezier` and SVGPathCommander * code cleanup
63 lines
2.4 KiB
JavaScript
63 lines
2.4 KiB
JavaScript
import support3DTransform from 'shorter-js/src/boolean/support3DTransform';
|
|
import KEC from '../objects/kute';
|
|
import perspective from '../interpolation/perspective';
|
|
import translate3d from '../interpolation/translate3d';
|
|
import rotate3d from '../interpolation/rotate3d';
|
|
import translate from '../interpolation/translate';
|
|
import rotate from '../interpolation/rotate';
|
|
import scale from '../interpolation/scale';
|
|
import skew from '../interpolation/skew';
|
|
|
|
import supportTransform from '../util/supportLegacyTransform';
|
|
import transformProperty from '../util/transformProperty';
|
|
|
|
// same as svgTransform, htmlAttributes
|
|
// the component that handles all browsers IE9+
|
|
|
|
// Component Functions
|
|
/**
|
|
* Sets the property update function.
|
|
* @param {string} tweenProp the property name
|
|
*/
|
|
export function onStartLegacyTransform(tweenProp) {
|
|
if (!KEC[tweenProp] && this.valuesEnd[tweenProp]) {
|
|
if (support3DTransform) {
|
|
KEC[tweenProp] = (elem, a, b, v) => {
|
|
// eslint-disable-next-line no-param-reassign
|
|
elem.style[transformProperty] = (a.perspective || b.perspective ? perspective(a.perspective, b.perspective, 'px', v) : '') // one side might be 0
|
|
+ (a.translate3d ? translate3d(a.translate3d, b.translate3d, 'px', v) : '') // array [x,y,z]
|
|
+ (a.rotate3d ? rotate3d(a.rotate3d, b.rotate3d, 'deg', v) : '') // array [x,y,z]
|
|
+ (a.skew ? skew(a.skew, b.skew, 'deg', v) : '') // array [x,y]
|
|
+ (a.scale || b.scale ? scale(a.scale, b.scale, v) : ''); // one side might be 0
|
|
};
|
|
} else if (supportTransform) {
|
|
KEC[tweenProp] = (elem, a, b, v) => {
|
|
// eslint-disable-next-line no-param-reassign
|
|
elem.style[transformProperty] = (a.translate ? translate(a.translate, b.translate, 'px', v) : '') // array [x,y]
|
|
+ ((a.rotate || b.rotate) ? rotate(a.rotate, b.rotate, 'deg', v) : '') // one side might be 0
|
|
+ (a.skew ? skew(a.skew, b.skew, 'deg', v) : '') // array [x,y]
|
|
+ (a.scale || b.scale ? scale(a.scale, b.scale, v) : ''); // one side might be 0
|
|
};
|
|
}
|
|
}
|
|
}
|
|
|
|
// Base Component
|
|
const BaseLegacyTransform = {
|
|
component: 'baseLegacyTransform',
|
|
property: 'transform',
|
|
functions: { onStart: onStartLegacyTransform },
|
|
Interpolate: {
|
|
perspective,
|
|
translate3d,
|
|
rotate3d,
|
|
translate,
|
|
rotate,
|
|
scale,
|
|
skew,
|
|
},
|
|
Util: { transformProperty },
|
|
};
|
|
|
|
export default BaseLegacyTransform;
|