Skip to content
This repository has been archived by the owner on Mar 26, 2023. It is now read-only.

Commit

Permalink
refactoring rule generation
Browse files Browse the repository at this point in the history
  • Loading branch information
@rnosov
rnosov committed Feb 22, 2018
1 parent 4346f68 commit 685d8e5
Show file tree
Hide file tree
Showing 24 changed files with 456 additions and 583 deletions.
2 changes: 1 addition & 1 deletion src/Reveal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function Reveal({ children, timeout, duration, delay, count, forever, durationOu
: effect ? { duration: timeout === undefined ? duration : timeout, delay, count, forever, className: effect, style: {} } : inEffect;
}

return wrap(props, factory, children);
return wrap(props, factory(false), factory(true), children);
}

Reveal.propTypes = propTypes;
Expand Down
17 changes: 9 additions & 8 deletions src/RevealBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,9 +80,11 @@ class RevealBase extends React.Component {
super(props, context);
this.isOn = 'when' in props ? !!props.when : true;
this.state = {
collapse: props.collapse ? RevealBase.getInitialCollapseStyle(props): void 0,
collapse: props.collapse //&& (props.appear || (context.transitionGroup&&!context.transitionGroup.isMounting))
? RevealBase.getInitialCollapseStyle(props)
: void 0,
style: {
opacity: (!this.isOn||props.always) && props.outEffect ? 0 : void 0,
opacity: (!this.isOn||props.alwaysReveal) && props.outEffect ? 0 : void 0,
//visibility: props.when ? 'visible' : 'hidden',
},
};
Expand Down Expand Up @@ -208,10 +210,9 @@ class RevealBase extends React.Component {
const leaving = !this.isOn && props.outEffect,
inOut = props[leaving ? 'outEffect' : 'inEffect'],
collapse = 'collapse' in props;
//const inOut = props[this.isOn || !props.outEffectEffect ?'inEffect':'outEffect'];
let animationName = (('style' in inOut) && inOut.style.animationName) || void 0;
if ((props.outEffect||this.isOn) && inOut.make)
animationName = (!leaving && this.enterAnimation) || inOut.make();
animationName = (!leaving && this.enterAnimation) || inOut.make(leaving, props);
let state = {/* status: leaving ? 'exiting':'entering',*/
hasAppeared: true,
hasExited: false,
Expand Down Expand Up @@ -305,11 +306,11 @@ class RevealBase extends React.Component {
if (!this.el || this.props.disabled)
return;
if ('make' in this.props.inEffect)
this.enterAnimation = this.props.inEffect.make();
this.enterAnimation = this.props.inEffect.make(false, this.props);
const parentGroup = this.context.transitionGroup;
const appear = parentGroup && !parentGroup.isMounting ? !('enter' in this.props && this.props.enter === false) : this.props.appear;
if (this.isOn && ((('when' in this.props || 'spy' in this.props) && !appear)
|| (ssr && !fadeOutEnabled && this.props.outEffect && !this.props.always && (RevealBase.getTop(this.el) < window.pageYOffset + window.innerHeight)))
|| (ssr && !fadeOutEnabled && this.props.outEffect && !this.props.alwaysReveal && (RevealBase.getTop(this.el) < window.pageYOffset + window.innerHeight)))
) {
this.isShown = true;
this.setState({
Expand Down Expand Up @@ -381,8 +382,8 @@ class RevealBase extends React.Component {
componentWillReceiveProps (props) {
if ('when' in props)
this.isOn = !!props.when;
if ( props.checksum !== this.props.checksum && 'make' in this.props.inEffect)
this.enterAnimation = this.props.inEffect.make();
if (props.checksum !== this.props.checksum)
this.enterAnimation = props.inEffect.make(false, props);
if (!this.isOn && props.onExited && ('exit' in props) && props.exit === false ) {
props.onExited();
return;
Expand Down
236 changes: 111 additions & 125 deletions src/in-and-out/Bounce.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,136 +28,122 @@ const
forever: bool,
};

function Bounce({ children, out, left, right, up, down, top, bottom, mirror, opposite, forever,
timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {

function factory(reverse) {

function make() {
if ( !mirror !== !(reverse&&opposite)) // Boolean XOR
[left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
const
transformX = left || right,
transformY = top || bottom || up || down,
transform = transformX || transformY;
let rule, x0, y0, x20, y20, y40, x60, y60, x75, y75, x90, y90, x100, y100;
if (reverse) {
x20 = transformX ? ( right ?'-':'') + '20px' : 0;
y20 = transformY ? ( up||bottom?'':'-') + '10px' : '0';
y40 = ( down||top ? '':'-') + '20px';
x100 = transformX ? ( left ? '-' :'' ) + '2000px':'0';
y100 = transformY ? ( down||top?'-':'') +'2000px':'0';
}
else {
x0 = transformX ? ((left?'-':'') + '3000px'):'0';
y0 = transformY ? ((down||top?'-':'') + '3000px'):'0';
x60 = transformX ? ((right?'-':'') + '25px'):'0';
y60 = transformY ? ((up||bottom?'-':'') + '25px'):'0';
x75 = transformX ? ((left?'-':'') + '10px'):'0';
y75 = transformY ? ((down||top?'-':'') + '10px'):'0';
x90 = transformX ? ((right?'-':'') + '5px'):'0';
y90 = transformY ? ((up||bottom?'-':'') + '5px'):'0';
}

if (transform)
rule = reverse
?`
20% {
transform: translate3d(${x20}, ${y20}, 0);
}
${ transformY
?`40%, 45% {
opacity: 1;
transform: translate3d(0, ${y40}, 0);
}`
:''
}
to {
opacity: 0;
transform: translate3d(${x100}, ${y100}, 0);
}
`
:`from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(${x0}, ${y0}, 0);
function make(reverse, { left, right, up, down, top, bottom, mirror, opposite, }) {
if ( !mirror !== !(reverse&&opposite)) // Boolean XOR
[left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
const
transformX = left || right,
transformY = top || bottom || up || down,
transform = transformX || transformY;
let rule, x0, y0, x20, y20, y40, x60, y60, x75, y75, x90, y90, x100, y100;
if (reverse) {
x20 = transformX ? ( right ?'-':'') + '20px' : 0;
y20 = transformY ? ( up||bottom?'':'-') + '10px' : '0';
y40 = ( down||top ? '':'-') + '20px';
x100 = transformX ? ( left ? '-' :'' ) + '2000px':'0';
y100 = transformY ? ( down||top?'-':'') +'2000px':'0';
}
else {
x0 = transformX ? ((left?'-':'') + '3000px'):'0';
y0 = transformY ? ((down||top?'-':'') + '3000px'):'0';
x60 = transformX ? ((right?'-':'') + '25px'):'0';
y60 = transformY ? ((up||bottom?'-':'') + '25px'):'0';
x75 = transformX ? ((left?'-':'') + '10px'):'0';
y75 = transformY ? ((down||top?'-':'') + '10px'):'0';
x90 = transformX ? ((right?'-':'') + '5px'):'0';
y90 = transformY ? ((up||bottom?'-':'') + '5px'):'0';
}
if (transform)
rule = reverse
?`
20% {
transform: translate3d(${x20}, ${y20}, 0);
}
60% {
${ transformY
?`40%, 45% {
opacity: 1;
transform: translate3d(${x60}, ${y60}, 0);
}
75% {
transform: translate3d(${x75}, ${y75}, 0);
}
90% {
transform: translate3d(${x90}, ${y90}, 0);
}
to {
transform: none;
}`;
else
rule = reverse
? `20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
transform: translate3d(0, ${y40}, 0);
}`
: `from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
:''
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}`;
return animation(rule);
}

return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
}
opacity: 0;
transform: translate3d(${x100}, ${y100}, 0);
}
`
:`from, 60%, 75%, 90%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
from {
opacity: 0;
transform: translate3d(${x0}, ${y0}, 0);
}
60% {
opacity: 1;
transform: translate3d(${x60}, ${y60}, 0);
}
75% {
transform: translate3d(${x75}, ${y75}, 0);
}
90% {
transform: translate3d(${x90}, ${y90}, 0);
}
to {
transform: none;
}`;
else
rule = reverse
? `20% {
transform: scale3d(.9, .9, .9);
}
50%, 55% {
opacity: 1;
transform: scale3d(1.1, 1.1, 1.1);
}
to {
opacity: 0;
transform: scale3d(.3, .3, .3);
}`
: `from, 20%, 40%, 60%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
20% {
transform: scale3d(1.1, 1.1, 1.1);
}
40% {
transform: scale3d(.9, .9, .9);
}
60% {
opacity: 1;
transform: scale3d(1.03, 1.03, 1.03);
}
80% {
transform: scale3d(.97, .97, .97);
}
to {
opacity: 1;
transform: scale3d(1, 1, 1);
}`;
return animation(rule);
}

const checksum = 0 + (left?1:0) + (right?10:0) + (top||down?100:0) + (bottom||up?1000:0) + (mirror?10000:0) + (opposite?100000:0);
return context
? wrap(props, factory, children, checksum)
: factory(out)
;
function Bounce({ children, out, forever,
timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults) {
const effect = {
make,
duration: timeout === undefined ? duration : timeout,
delay,
forever,
count,
style: { animationFillMode: 'both', },
reverse: props.left,
};
const checksum = 0 + (props.left?1:0) + (props.right?10:0) + (props.top||props.down?100:0) + (props.bottom||props.up?1000:0) + (props.mirror?10000:0) + (props.opposite?100000:0);
return wrap(props, effect, effect, children, checksum);
}

Bounce.propTypes = propTypes;
Expand Down
54 changes: 27 additions & 27 deletions src/in-and-out/Fade.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,35 +29,35 @@ const
forever: bool,
};

function Fade({ children, out, distance, left, right, up, down, top, bottom, big, mirror, opposite, forever,
timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {

function factory(reverse) {

function make() {
const transform = left||right||up||down||top||bottom;
let x, y;
if (transform) {
if ( !mirror !== !(reverse&&opposite)) // Boolean XOR
[left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
const dist = distance || (big ? '2000px' : '100%');
x = left ? '-' + dist : ( right ? dist : '0' );
y = down || top ? '-'+ dist : ( up || bottom ? dist : '0' );
}
return animation(
`${!reverse?'from':'to'} {opacity: 0;${ transform ? ` transform: translate3d(${x}, ${y}, 0);` : ''}}
${ reverse?'from':'to'} {opacity: 1;transform: none;} `
);
}

return { make, duration: timeout === undefined ? duration : timeout, delay, forever, count, style: { animationFillMode: 'both', }, reverse: left, };
function make(reverse, { distance, left, right, up, down, top, bottom, big, mirror, opposite, }) {
const transform = left||right||up||down||top||bottom;
let x, y;
if (transform) {
if ( !mirror !== !(reverse&&opposite)) // Boolean XOR
[left, right, top, bottom, up, down] = [right, left, bottom, top, down, up];
const dist = distance || (big ? '2000px' : '100%');
x = left ? '-' + dist : ( right ? dist : '0' );
y = down || top ? '-'+ dist : ( up || bottom ? dist : '0' );
}
return animation(
`${!reverse?'from':'to'} {opacity: 0;${ transform ? ` transform: translate3d(${x}, ${y}, 0);` : ''}}
${ reverse?'from':'to'} {opacity: 1;transform: none;} `
);
}

const checksum = (distance?distance.toString():0) + (left?1:0) + (right?10:0) + (top||down?100:0) + (bottom||up?1000:0) + (mirror?10000:0) + (opposite?100000:0) + (big?1000000:0);
return context
? wrap(props, factory, children, checksum)
: factory(out)
;
function Fade({ children, out, forever,
timeout, duration = defaults.duration, delay = defaults.delay, count = defaults.count, ...props } = defaults, context = false) {
const effect = {
make,
duration: timeout === undefined ? duration : timeout,
delay,
forever,
count,
style: { animationFillMode: 'both', },
reverse: props.left,
};
const checksum = (props.distance?props.distance.toString():0) + (props.left?1:0) + (props.right?10:0) + (props.top||props.down?100:0) + (props.bottom||props.up?1000:0) + (props.mirror?10000:0) + (props.opposite?100000:0) + (props.big?1000000:0);
return context ? wrap(props, effect, effect, children, checksum) : effect;
}

Fade.propTypes = propTypes;
Expand Down
Loading

0 comments on commit 685d8e5

Please sign in to comment.