Semantic-UI-React Reveal не работает - PullRequest
Новая
       10

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

0 голосов
/ 02 июня 2018

Я пытаюсь использовать эффект Reveal с Semantic-UI-React, и мой «скрытый» элемент не становится видимым, когда я наводю указатель мыши на элемент, я обнаружил этот поток - Semantic UI React -Добавление эффекта открытия к изображениям в картах - однако переключение на обычный semantic-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>

1 Ответ

0 голосов
/ 19 января 2019

Вы должны либо добавить child или content prop к Reveal.Content, когда оно равно visible as - 

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

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

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

...