простой переход непрозрачности поза реакции не работает - PullRequest
Новая
       31

простой переход непрозрачности поза реакции не работает

0 голосов
/ 29 марта 2019

Я новичок с react-pose, и я пробую простую вещь, но переход не работает.

Мне нужен только переход между двумя состояниями.

Как opacity 0 => 1

Я хочу использовать его с const, поэтому я использую новый обработчик реакции. 

import React, { useState } from 'react';
import posed from 'react-pose';

const Pop = () => {
  const [position, setPosition] = useState(false);
  const Box = posed.div({
    left: { x: 0 },
    right: { x: 100 }
  });
  const toggleVisibility = () => {
    setPosition(!position);
  };

  return (
    <div>
      <Box pose={position ? 'left' : 'right'} className="box" />
      <button onClick={toggleVisibility}>Toggle visibility</button>
    </div>
  );
};

export default Pop;

Все работает, но этот код действует, как я установил transition: 0s

Вы можете мне помочь?

1 Ответ

0 голосов
/ 29 марта 2019

Здесь решение Вам нужно поместить const Box вне класса реакции, чтобы предотвратить повторное рендеринг. 

import React, { useState } from 'react';
import posed from 'react-pose';

const Box = posed.div({
    left: { x: 0 },
    right: { x: 100 }
  });

const Pop = () => {
  const [position, setPosition] = useState(false);
  const toggleVisibility = () => {
    setPosition(!position);
  };

  return (
    <div>
      <Box pose={position ? 'left' : 'right'} className="box" />
      <button onClick={toggleVisibility}>Toggle visibility</button>
    </div>
  );
};

export default Pop;
...