1

我正在尝试实现 react-motion 的 TransitionMotion 包装器，并将其完成，但还有一个问题。在本例中，插值数组由两个元素组成（因为 chartConfigs.length 当前为 2），并且我在第一个元素中嵌套了另一个地图。其他一切都很好，除了当我只想要一个时我显然得到了两行。如何以干净的方式解决这个问题？

const getStyles = () => {
    return chartConfigs.map(datum => ({
      data: datum,
      style: {
        opacity: spring(1, { stiffness: 30})
      },
      key: datum.name
    }))
  }

  const getDefaultStyles = () => {
    return chartConfigs.map(datum =>({
      data: datum,
      style: {
        opacity: 0
      },
      key: datum.name
    }))
  }

return (
      <TransitionMotion
        defaultStyles={getDefaultStyles()}
        styles={getStyles()}

      >
        {(interpolated) => (
          <div>
            {interpolated.map((config) => (
              <div key={config.key} style={{ ...config.style }}>
                <div className='row' style={{ paddingTop: "30px" }}>
                  {chartConfigs.length > 1 && 
                    chartConfigs.map((chartConfig, i) => {
                      return (
                        <div
                          className={`col-lg-${columnsCount}`}
                          key={"chart-toggler" + i}
                        >
                            <div className='card m-b-30'>
                              <h4 className='card-title font-16 mt-0'>
                                {chartConfig.name}
                              </h4>
                            </div>
                          </div>                  
                      )
                    })}
                </div>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
    )

编辑：

这是我的解决方案的新版本，但很难在行上显示元素彼此相邻：

<div className='row' style={{ paddingTop: "30px" }}>
    {chartConfigs.length > 1 ? 
      <TransitionMotion
        defaultStyles={getDefaultStyles()}
        styles={getStyles()}
        willEnter={willEnter}
        willLeave={willLeave}
      >
        {interpolated => (
          <div id='container' style={{width: '100%', display: 'inline-block'}} >
            {interpolated.map((config, i) => (
              <div key={config.key} style={{ ...config.style }}>
                {(selected = config.data.name === currentChartName)}
                <div
                  className={`col-lg-${columnsCount}`}
                  key={"chart-toggler" + i}
                >
                  <div
                    className={
                      selected
                        ? "card m-b-30 text-white bg-primary"
                        : "card m-b-30"
                    }
                    style={{
                      width: '100%',
                      height: "calc(100% - 30px)",
                    }}
                    onClick={() => setCurrentChartName(config.data.name)}
                  >
                    <div className='card-body'>
                      <h4 className='card-title font-16 mt-0'>
                        {config.data.name}
                      </h4>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </TransitionMotion>
      : null }
    </div>

此外，当组件卸载时，我无法理解如何使用 TransitionMotion。所以基本上当我在页面上呈现不同的组件时淡出效果。我可以为此使用 willLeave() 函数吗？目前这是它的样子，但我不知道如何更进一步：

const willLeave = () => ({
  opacity: spring(0)
})

感谢您的时间和帮助！

4

1 回答 1

0

TransitionMotion 故意为您提供的行数超过了当前渲染的行数，因为它会记住所有正在制作动画的行。

所以这取决于你想在这里实现什么。我的预感是您可能在内部级别中误用了 chatConfigs。您应该访问 config.data.name 而不是 chartConfig.name，不是吗？你知道我的意思？

于 2019-05-24T02:27:16.440 回答