how to measure before animating with Transition ?

[cusxio]

Hello thank you for this library, been using it to create some components, working well so far.

Problem Description

I'm trying to use Transition to create a drop down menu.

To position and animate the drop down menu properly, I need to measure the width and height of the element.

How can I do this with in react-move ?

class Menu extends Component {
  constructor() {
    super();
    this.getMenuList = this.getMenuList.bind(this);
    this.getInnerDimensions = this.getInnerDimensions.bind(this);
    this.state = {
      items: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.open && nextProps.open) {
      this.setState({ items: [{}] });
    }
  }

  getMenuList(c) {
    this.menuList = c;
  }

  getInnerDimensions() { // where should I call getInnerDimensions? because the component is not even mounted.
    this.dimensions = {
      width: this.menuList.offsetWidth,
      height: this.menuList.offsetHeight,
    };
  }

  render() {
    const { open, children } = this.props;
    const { items } = this.state;

    return (
      <Portal open={open}>
        <Transition
          data={items}
          getKey={(_, i) => i}
          update={() => ({
            opacity: 1,
            scale: 1,
          })}
          enter={() => ({
            opacity: 0,
            scale: 0,
          })}
          leave={() => ({
            opacity: 0,
            scale: 0,
          })}
          duration={200}
          easing={bezier(0, 0, 0.2, 1)}
        >
          {interpolatedStyles => {
            if (interpolatedStyles.length === 0) {
              return null;
            }

            const { state: { opacity } } = interpolatedStyles[0];
            return (
              <MenuListWrapper>
                <MenuList
                  innerRef={this.getMenuList}
                  style={{
                    opacity,
                  }}
                >
                  {children}
                </MenuList>
              </MenuListWrapper>
            );
          }}
        </Transition>
      </Portal>
    );
  }
}

[chasedeanda]

Were you able to find a workaround for this?

[tannerlinsley]

You would likely need to put it in a type of wrapper component that is invisible or overflow hidden, measure the dimensions of the element, then apply the transition.