Javascript 反应切换类+；CSS转换，不工作。。。为什么？

我一直在使用类来控制打开/关闭行为，并通过CSS转换实现效果。我已经在其他组件上使用过，没有问题，但是出于某种原因，在这个场景中，相同的方法让我失败了

打开/关闭行为附加（我看到了带有背景色和translateY的端点差异），但是CSS转换本身丢失了。。。你知道为什么我失去了CSS转换，但其他一切都按预期工作吗

注意，当我使用开发人员工具手动切换打开/关闭的类时，效果很好！CSS转换开始了

那么单击React-on-click切换应用的类，但却丢失了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>
        );
    }
}

---

这是因为

react router

在switch语句中将每个路由视为一个案例，而

组件中的

路径在该案例中是一个
键。当路径更改时，组件将完全卸载。因此，您看不到CSS转换，因为它的DOM已经不存在了

如果要使用
react router
设置动画。您需要使用名为
react transition group
的react实用程序库。下面是
react router
作者的一个详细示例，您可以按照这个示例进行操作

我希望这有帮助

另外，youtube上有一个长达30分钟的精彩演讲，内容是关于如何制作非常好的动画，以回应路线欢呼：）
更改键必须更新元素

请尝试以下代码：

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>
    }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
_isProjectNavOpen:对，
_项目名称：1，
_罗特基：1
}
this.\u toggleProjectNav=this.\u toggleProjectNav.bind（this）；
}
_toggleProjectNav（）{
this.setState（prevState=>({
_isProjectNavOpen:！prevState.\u isProjectNavOpen，
_ProjectsKey:prevState.\u ProjectsKey+1，
_RouteKey:prevState.\u RouteKey+1
}));
}
render（）{
} />
}
}
事实上，问题在于，
react-router
正在卸载组件，并使用新类重新装载它，在这个过程中丢失了CSS转换。要解决此问题，只需在
组件上使用
渲染
而不是
组件的
即可

关于其工作原理，请参阅
react router
文档：

您可以传入一个函数，以便在位置匹配时调用，而不是使用组件属性为您创建一个新的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>
    }
}

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
_isProjectNavOpen：true
}
this.\u toggleProjectNav=this.\u toggleProjectNav.bind（this）；
}
_toggleProjectNav（）{
this.setState（prevState=>({
_isProjectNavOpen:！prevState.\u isProjectNavOpen，
}));
}
render（）{
} />
}
}

我使用
渲染创建了一个
，它似乎工作正常

干杯
 它必须完全替换DOM元素。当您打开DevTools并切换菜单时，整个DOM元素是否会闪烁，或者仅仅是它的
class
属性？我赌的是路由器库。如果您不使用
路由
和
路由器
包装
项目
，请尝试一下它是否有效？另外，您使用哪个版本？您的代码没有显示CSS转换组的导入？从“反应转换组”导入{CSSTransitionGroup}。。。。在转换和反应方面存在一些问题（这就是为什么最初的附加组件被发布的原因）。。有一篇好文章
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>
    }
}

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>
    }
}