我正在尝试在反应中做一个非常简单的组件不透明度转换。我正在使用 ReactCSSTransition 组来执行此操作，并且我相信我已正确设置，但似乎无法正常工作。我将不胜感激任何帮助，请参阅下面我的代码笔：
let {BrowserRouter,Link,Route} = ReactRouterDOM;
let Router = BrowserRouter;
let ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
class Artwork extends React.Component {
render() {
return (
<div>
<h3>Art</h3>
</div>
);
}
}
class Home extends React.Component {
render() {
return (
<h1>Home</h1>
);
}
}
class User extends React.Component {
render() {
return (
<div className="row">
<div className="col-md-4">
<h3>The User Page</h3>
<p>User ID:</p>
<li><Link to="/user/artwork">Artwork</Link></li>
</div>
<div className="col-md-8">
<Route path="/user/artwork" component={Artwork}/>
</div>
</div>
);
}
}
class App extends React.Component {
render() {
return (
<Router>
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<ul>
<li><Link to="/user">User</Link></li>
<li><Link to="/home">Home</Link></li>
</ul>
</div>
</div>
<hr/>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<ReactCSSTransitionGroup
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={1500}>
<Route path="/" exact component={Home}/>
<Route path="/home" exact component={Home}/>
<Route path="/user" component={User}/>
</ReactCSSTransitionGroup>
</div>
</div>
</div>
</Router>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
CSS
.example-appear {
opacity: 0.01;
}
.example-appear.example-appear-active {
opacity: 1;
transition: opacity 1500ms ease-in;
}
谢谢