无法在 css-grid-animation 中进行渲染延迟？答案

【问题标题】：Not able to do rendering delay in css-grid-animation?无法在 css-grid-animation 中进行渲染延迟？
【发布时间】：2019-07-24 15:58:39
【问题描述】：

我正在使用animate-css-grid 和 React 库在网格设计中构建我的作品集，我在这里实现了我想要的 pen link。但是当我点击任何一个框时，应该与框一起呈现的文本会立即呈现。我希望它在盒子放大后渲染。这是我在渲染文本时使用的片段代码。

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 组件的展开状态为真时，我正在渲染它。我不知道怎么拖延。 animate-css-grid 库提供自定义配置，但我无法理解如何使用它。任何熟悉 CSS 动画的人都可以在这里帮助我。

【问题讨论】：

您好，我想知道您是否在这方面取得了任何进展？我的回答对你有帮助吗？
嘿，我应用了你的答案，它很有帮助，你的解决方案的一个问题是，如果我在文本中有任何动画，我看不到它，直到 500 毫秒延迟结束，如果你有任何解决方案，这会有所帮助，但动画不是我的首要任务。总而言之，您的解决方案有效，非常感谢您，并为延迟回复表示歉意。

标签： css reactjs css-animations css-grid

【解决方案1】：

我在<Text /> 返回的内容周围添加了className，并在--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

【讨论】：