Как отобразить внутри оболочки TransitionMotion? - PullRequest
Новая
       22

Как отобразить внутри оболочки TransitionMotion?

1 голос
/ 22 мая 2019

Я пытаюсь реализовать оболочку TransitionMotion response-motion и дойти до дома, но есть еще одна проблема.В этом примере интерполированный -array состоит из двух элементов (потому что 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)
})

Спасибо за ваше время и помощь!

1 Ответ

0 голосов
/ 24 мая 2019

TransitionMotion преднамеренно дает вам больше, чем количество строк, которые вы в настоящий момент визуализируете, поскольку оно запоминает все строки, находящиеся в процессе анимации.

Так что это зависит от того, чего вы пытаетесь достичь здесь. Я догадываюсь, что вы, вероятно, неправильно использовали chatConfigs на внутреннем уровне. Вы должны получить доступ к config.data.name вместо chartConfig.name, нет? Вы понимаете, о чем я?

...