Не удается сделать задержку рендеринга в css-grid-animation? - PullRequest
Новая
       9

Не удается сделать задержку рендеринга в css-grid-animation?

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

Я использую animate-css-grid и библиотеку React для создания своего портфолио в виде сетки. Я добился своего, чего я хотел, это ссылка пера .Но когда я щелкаю по любому из полей, текст, который должен идти вместе с полем, отображается мгновенно.Я хочу, чтобы он отображался после увеличения масштаба окна.это фрагмент кода, который я использую при рендеринге текста. 

class Card extends React.Component {
state = { expanded: false };
randomNumber = Math.floor(Math.random() * 5) + 1;

render() {
    return (
        <div
            style={{ backgroundColor: this.props.color }}
            class={`card card--${this.randomNumber} ${
                this.state.expanded ? "card--expanded" : ""
                }`}
            onClick={() => {
                this.setState({ expanded: !this.state.expanded });
            }}
        >{this.state.expanded ? <Text /> :
            (<div>

                {/* <div className="card__avatar" />
                <div className="card__title" /> */}
                <div className="card__description"> 
   {this.props.subject}</div>
            </div>)}
        </div>
    );
  }
}

Я рендеринг компонента Text , когда он получает расширенное состояние true.Я не знаю, как это отложить.Библиотека animate-css-grid предоставляет настраиваемую конфигурацию, но я не могу понять, как ее использовать.Может кто-нибудь, кто знаком с CSS-анимацией, может помочь мне, пожалуйста.

1 Ответ

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

Я добавил className вокруг того, что возвращает <Text />, и активировал анимацию, чтобы показать текст, когда присутствует --card-expanded className.Задержка 500ms мне нравится, но она, конечно, настраивается. 

.card-text {  
  opacity: 0;
}

.card--expanded .card-text {
  animation: 1s show-text forwards 500ms;
}

@keyframes show-text {
  to {
    opacity: 1;
  }
}

CodePen

...