Переход с реагирующей пружины не оживляет переход в состояние - PullRequest
Новая
       25

Переход с реагирующей пружины не оживляет переход в состояние

0 голосов
/ 25 декабря 2018

Я делаю компонент Collapse, используя реагирующую пружину, которая получает дочерние элементы и логическое значение collapsed.Это довольно просто, но по какой-то причине анимация, когда дети монтируются, никогда не запускается и в то же время оставляет анимацию хорошей.

Вот как выглядит компонент 

const baseStyles = {
  overflow: "hidden"
};
const openStyles = {
  height: "auto"
};
const collapsedStyles = {
  height: 0
};
const animationConfig = {
  duration: 1000
};
const Collapse = ({ collapsed, children, ...props }) => {
  return (
    <Transition
      items={collapsed}
      native
      config={animationConfig}
      from={baseStyles}
      enter={openStyles}
      leave={collapsedStyles}
      // onFrame={console.log}
      {...props}
    >
      {collapsed => !collapsed
          ? style => <animated.div style={style} children={children} />
          : null
      }
    </Transition>
  );
};

А вот рабочий код https://codesandbox.io/s/459p84ky4 Я что-то не так делаю или это ошибка в реагирующей пружине?

1 Ответ

0 голосов
/ 25 декабря 2018

Вы должны понимать, from и enter, что вы ничего не применяете в обоих реквизитах, означает, что непрозрачность всегда равна 1, и, следовательно, анимация не работает

from означает, что должно быть наначальная стадия и enter означает, что это должно быть при рендеринге.

Итак, вам нужно установить непрозрачность 0 в from и установить ее в 1 внутри enter

const baseStyles = {
  background: "rgba(255,0,0,.2)",
  overflow: "hidden",
  opacity:0
};
const openStyles = {
  height: "auto",
  opacity: 1
};

Редактировать:

Если вы хотите, чтобы высота с нуля была автоматически установлена, вам нужно сначала установить высоту на 0 в 

const baseStyles = {
  background: "rgba(255,0,0,.2)",
  overflow: "hidden",
  height: 0
};
const openStyles = {
  height: "auto",
  opacity: 1
};

Демо

...