Semantic-UI-React Reveal не работает

Я пытаюсь использовать эффект Reveal с Semantic-UI-React, и мой «скрытый» элемент не становится видимым, когда я наводю указатель мыши на элемент, я нашел этот поток - Semantic UI React - Добавление эффекта раскрытия к изображениям в карточках - однако переключение на простую семантическую- ui-css с элементом div, как указано в решении, у меня тоже не сработал, какие-нибудь советы?

QuestionCard.js

<Card.Group>
        <Card> 
          <Reveal animated="move">
          <Reveal.Content visible>
            {null}
          </Reveal.Content>
          <Reveal.Content hidden>
          <Card.Content>
            <Image floated="right" size="mini" src="https://images.unsplash.com/photo-1458419948946-19fb2cc296af?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=909aa3b2057ec129c465bfa17d6497ff&auto=format&fit=crop&w=1050&q=80" />
            <Card.Header>Daniel Asks..</Card.Header>
            <Card.Meta>Would You Rather?</Card.Meta>
            <Card.Description>
              <strong>Option One:</strong> <em>Write Javascript?</em>
            </Card.Description>
            <Card.Description>
              <strong>Option Two:</strong> <em>Write Swift?</em>
            </Card.Description>
          </Card.Content>
          <Card.Content extra>
            <div className="ui two buttons">
              <Button basic color="green">
                Option One
              </Button>
              <Button basic color="yellow">
                Option Two
              </Button>
            </div>
          </Card.Content>
          </Reveal.Content>
          </Reveal>
        </Card>

reactjs semantic-ui-react semantic-ui
person Dmitriy    schedule 02.06.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам следует добавить свойство child или content к Reveal.Content, когда оно visible как -

<Reveal.Content visible>
    <Image src='https://react.semantic-ui.com/images/wireframe/square-image.png' size='medium' />
</Reveal.Content>

Если вы посмотрите на реализацию объекта Reveal.Content, если присутствуют дочерние элементы, он оборачивается в ElementType, в противном случае он ищет опору содержимого. И наконец возвращается к звонящему.

В вашей реализации мне нужно было только заменить нулевой элемент дочерним элементом Image-заполнитель, и все прошло гладко.

person pritam    schedule 19.01.2019