message: Shared position styles
diff: @@ -6,40 +6,33 @@ export default (props) => (
  {...props}
  onAnimating={(name, ref) => {ref.style.opacity = 0}}
  onAnimated={(name, ref) => {ref.style.opacity = 1}}>
  - {({fontColor, ...style}, name, {left, top, width, height, fontSize, color}) => (
  - !name.startsWith('text') ? <div key={name}
  - style={{
  + {({fontColor, ...style}, name, {left, top, width, height, fontSize, color}) => {
  + var position = {
  position: 'absolute',
  left,
  top,
  width,
  height,
  - backgroundColor: color,
  transformOrigin: 'top left',
  transform: `
  translate(${style.left - left}px, ${style.top - top}px)
  scale(${style.width / width}, ${style.height / height})
  `,
  + };
  + return !name.startsWith('text') ? <div key={name}
  + style={{
  + ...position,
  + backgroundColor: color,
  }}>
  </div> : <div key={name}
  style={{
  - position: 'absolute',
  - left,
  - top,
  - width,
  - height,
  + ...position,
  fontSize: `${fontSize}%`,
  - textAlign: 'center',
  color: `rgb(${Array(3).fill(Math.round(fontColor)).join(',')})`,
  zIndex: 1,
  - transformOrigin: 'top left',
  - transform: `
  - translate(${style.left - left}px, ${style.top - top}px)
  - scale(${style.width / width}, ${style.height / height})
  - `,
  }}>
  {color}
  </div>
  - )}
  + }}
  </SharedElementMotion>
  );
  