React切换类 CSS过渡，不起作用.为什么

Question

我一直在使用类来控制带有a css转换的开放行为。我在其他组件上使用了此方法，没问题，但是由于某种原因，在这种情况下，同样的方法使我失败了...

开放/关闭行为附加（我看到带有背景颜色和翻译的最终差异），但是CSS过渡本身丢失了...有什么想法我为什么失去CSS过渡，但其他一切都按预期工作？p>注意，当我使用开发人员工具手动切换开放/关闭类时，它可以正常工作！CSS的过渡接收！

那么，单击时，react的情况是什么，以切换施加的类，但丢失了CSS过渡？

class Projects extends React.Component {
    /* constructor, etc... */
    render() {
        return (
            <div className="projects-nav-container">
                <div className="center title monospace" onClick={this.props._toggleProjectNav} id="Menu">Menu</div>
                <ul className={`projects-nav ${this.props._isProjectNavOpen ? 'open' : 'closed'}`}>
                    { PROJECTS.map((project, index) => 
                    <li key={index} >
                         <p>project here</p>
                    </li>
                    ) }
                </ul>
            </div>
        );
    }
}

app.js看起来如此：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            _isProjectNavOpen: true
        }
        this._toggleProjectNav = this._toggleProjectNav.bind(this);
    }
    _toggleProjectNav() {
        this.setState(prevState => ({
            _isProjectNavOpen: !prevState._isProjectNavOpen,
        }));
    }
    render() {
        <div>
            <Router>
                <Route path="/projects" component={(props, state, params) => 
                    <Projects 
                        _toggleProjectNav={this._toggleProjectNav}
                        _isProjectNavOpen={this.state._isProjectNavOpen} 
                    {...props} />} />
            </Router>
        </div>
    }
}

scss：

.projects-nav {
    @include transition(all $transition_speed ease);
    &.open {
        @include transform(translateY(0));
        background: red
    }
    &.closed {
        @include transform(translateY(-100vh));
        background: green;
    }
}

Answer 1

它是因为react-router将每个路线视为开关语句中的情况，而<Route />组件中的path是该情况的key。当路径更改时，组件已完全卸下。因此，您看不到CSS过渡，因为DOM已不存在。

如果要使用react-router动画。您需要使用称为react-transition-group的React实用程序库。这是react-router的作者的详细示例，您可以遵循。React路由器动画示例

我希望这会有所帮助。

另外，在YouTube上有大约30分钟的出色演讲，讨论了如何在路由https://www.youtube.com/watch?v=s3u-ccn4pem cheers中进行反应中真正做得很好的动画：）

Answer 2

的确，问题是react-router正在卸载您的组件并将其再次安装在新类中，在此过程中丢失了CSS过渡。要解决此问题，只需在<Route>组件上使用component的render 。

从react-router文档中进行此操作：

您可以使用组件道具为您创建新的React元素，而是可以传递位置匹配时要调用的函数。渲染道具接收与组件渲染道具的所有相同路线道具

有关更详细的说明，您可以阅读组件和渲染之间的React路由器差异。

总而言之，app.js应该像这样：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            _isProjectNavOpen: true
        }
        this._toggleProjectNav = this._toggleProjectNav.bind(this);
    }
    _toggleProjectNav() {
        this.setState(prevState => ({
            _isProjectNavOpen: !prevState._isProjectNavOpen,
        }));
    }
    render() {
        <div>
            <Router>
                <Route path="/projects" render={(props, state, params) => 
                    <Projects 
                        _toggleProjectNav={this._toggleProjectNav}
                        _isProjectNavOpen={this.state._isProjectNavOpen} 
                    {...props} />} />
            </Router>
        </div>
    }
}

我使用 render创建了一个代码框，并且似乎可以正常工作！

欢呼！

Answer 3

更改密钥必须更新元素。

尝试此代码：

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            _isProjectNavOpen: true,
            _ProjectsKey: 1,
            _RouteKey: 1
        }
        this._toggleProjectNav = this._toggleProjectNav.bind(this);
    }
    _toggleProjectNav() {
        this.setState(prevState => ({
            _isProjectNavOpen: !prevState._isProjectNavOpen,
            _ProjectsKey: prevState._ProjectsKey + 1,
            _RouteKey: prevState._RouteKey + 1
        }));
    }
    render() {
        <div>
            <Router>
                <Route key={this.state._RouteKey} path="/projects" component={(props, state, params) => 
                    <Projects 
                        _toggleProjectNav={this._toggleProjectNav}
                        _isProjectNavOpen={this.state._isProjectNavOpen} 
                        key={this.state._ProjectsKey} 
                    {...props} />} />
            </Router>
        </div>
    }
}