Hopefully now mostly complete animations: we iterate through zero or more start states and then settle on the final place.

This commit is contained in:
David Baker 2015-11-13 16:43:54 +00:00
parent bc2c744bed
commit 9d620dfb1d
3 changed files with 42 additions and 18 deletions

View file

@ -38,10 +38,26 @@ module.exports = React.createClass({
if (oldNode.style.left != c.props.style.left) {
Velocity(oldNode, { left: c.props.style.left }, self.props.transition);
console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
}
self.children[c.key] = old;
} else {
self.children[c.key] = c;
// new element. If it has a startStyle, use that as the style and go through
// the enter animations
var newProps = {
ref: self.collectNode.bind(self, c.key)
};
if (c.props.startStyle && Object.keys(c.props.startStyle).length) {
var startStyle = c.props.startStyle;
if (Array.isArray(startStyle)) {
startStyle = startStyle[0];
}
newProps._restingStyle = c.props.style;
newProps.style = startStyle;
console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
// apply the enter animations once it's mounted
}
self.children[c.key] = React.cloneElement(c, newProps);
}
});
},
@ -49,20 +65,25 @@ module.exports = React.createClass({
collectNode: function(k, node) {
if (
this.nodes[k] === undefined &&
node.props.enterTransition &&
Object.keys(node.props.enterTransition).length
node.props.startStyle &&
Object.keys(node.props.startStyle).length
) {
var domNode = ReactDom.findDOMNode(node);
var transitions = node.props.enterTransition;
var startStyles = node.props.startStyle;
var transitionOpts = node.props.enterTransitionOpts;
if (!Array.isArray(transitions)) {
transitions = [ transitions ];
if (!Array.isArray(startStyles)) {
startStyles = [ startStyles ];
transitionOpts = [ transitionOpts ];
}
for (var i = 0; i < transitions.length; ++i) {
Velocity(domNode, transitions[i], transitionOpts[i]);
console.log("enter: "+JSON.stringify(transitions[i]));
// start from startStyle 1: 0 is the one we gave it
// to start with, so now we animate 1 etc.
for (var i = 1; i < startStyles.length; ++i) {
Velocity(domNode, startStyles[i], transitionOpts[i-1]);
console.log("start: "+JSON.stringify(startStyles[i]));
}
// and then we animate to the resting state
Velocity(domNode, node.props._restingStyle, transitionOpts[i-1]);
console.log("enter: "+JSON.stringify(node.props._restingStyle));
}
this.nodes[k] = node;
},

View file

@ -671,7 +671,7 @@ module.exports = {
}
var node = this.eventNodes[ev.getId()];
if (node === undefined) continue;
if (!node) continue;
var domNode = node.getDOMNode();
var boundingRect = domNode.getBoundingClientRect();

View file

@ -112,19 +112,22 @@ module.exports = React.createClass({
// them and making them scoped to the whole RoomView. Not impossible, but
// getElementById seems simpler at least for a first cut.
var oldAvatarDomNode = document.getElementById('mx_readAvatar'+member.userId);
var startStyle = { left: left+'px' };
var enterTransitions = [];
var startStyles = [];
var enterTransitionOpts = [];
if (oldAvatarDomNode && this.readAvatarRect) {
var oldRect = oldAvatarDomNode.getBoundingClientRect();
startStyle.top = oldRect.top - this.readAvatarRect.top;
var topOffset = oldRect.top - this.readAvatarRect.top;
if (oldAvatarDomNode.style.left !== '0px') {
startStyle.left = oldAvatarDomNode.style.left;
enterTransitions.push({ left: left+'px' });
var leftOffset = oldAvatarDomNode.style.left;
// start at the old height and in the old h pos
startStyles.push({ top: topOffset, left: leftOffset });
enterTransitionOpts.push(transitionOpts);
}
enterTransitions.push({ top: '0px' });
// then shift to the rightmost column,
// and then it will drop down to its resting position
startStyles.push({ top: topOffset, left: '0px' });
enterTransitionOpts.push(transitionOpts);
}
@ -132,8 +135,8 @@ module.exports = React.createClass({
avatars.unshift(
<MemberAvatar key={member.userId} member={member}
width={14} height={14} resizeMethod="crop"
style={startStyle}
enterTransition={enterTransitions}
style={ { left: left+'px', top: '0px' } }
startStyle={startStyles}
enterTransitionOpts={enterTransitionOpts}
id={'mx_readAvatar'+member.userId}
/>