mad-star-studio/element-web
2
0
Fork 0
Code Pull requests Activity

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

19
src/skins/vector/views/molecules/EventTile.js
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}
/>