ReactCSSTransitionGroup 除了延迟我想要显示的元素外,对我没有任何作用。我试图让我的组件在页面加载时淡入。这是有问题的代码:
import React from 'react';
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup';
...
render() {
if(this.state.mounted) {
var child = (
<div>
<h1>{this.state.title}</h1>
<p>Description: {this.state.description}</p>
<p>Language(s): {this.state.lang}</p>
</div>
);
}
else {
var child = null;
}
return (
<div className="container">
<ReactCSSTransitionGroup transitionAppear={true} transitionAppearTimeout={1000} transitionName="puzzle" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
{child}
</ReactCSSTransitionGroup>
</div>
)
}
这是用 SASS 编写的 CSS:
.puzzle-appear {
opacity: .01;
.puzzle-appear-active {
opacity: 1;
transition: opacity 1000ms ease-in;
};
};
.puzzle-enter {
opacity: .01;
.puzzle-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
};
};
.puzzle-leave {
opacity: 1;
.puzzle-leave-active {
opacity: .01;
transition: opacity 300ms ease-in;
};
};
我已经尝试了 Google 提供的许多功能,但没有任何效果。然而,一切似乎都井然有序。代码有什么问题?
最佳答案
您的 SASS 代码建议将事件状态类应用于拼图元素内的元素,但我认为情况并非如此。
如果您在渲染时可以看到正在应用的类并且该位工作正常,那么这可能就是问题所在。将 -active 样式移出它们当前的嵌套位置。
关于javascript - ReactCSSTransitionGroup 不激活过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36320508/