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

Question

Я делаю компонент 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 Я что-то не так делаю или это ошибка в реагирующей пружине?

Answer 1

Вам нужно понять 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
};

демонстрация