初始页面加载时的 react-router 过渡动画答案

【问题标题】：react-router transition animation on initial page load初始页面加载时的 react-router 过渡动画
【发布时间】：2015-08-16 11:13:37
【问题描述】：

我想在使用react-router 转换时将动画应用于组件，并且我只能在初始加载后执行此操作，但是我也希望在初始装载时看到动画（页面刷新）。

这是我尝试过的。注意transitionAppear: true 没有做任何事情：

class App extends Component {

    constructor() {

        super();
    }

    render() {

        let path = this.context.router.getCurrentPath();
        path = path.substring(0, path.split('/', 2).join('/').length);
        return (
            Transitions({component: 'div', transitionName: 'fade', transitionAppear: true},
                handler({key: path})
            )
        )
    }
}

【问题讨论】：

你是只加载客户端还是服务器端？
现在它只是客户端。不过这应该没什么区别吧？
我正在做一些转换，如果页面是在服务器端加载的，它永远不会触发出现事件。您是否检查了生成的 DOM 以查看是否正在添加类？
据我所知，初始加载时没有更改任何类。之后，只要我更改在 RouteHandler 中呈现的组件 - 动画按预期工作
当我使用带有初始安装的动画时，我没有按正确的顺序安装。我不熟悉您的班级结构，但这可能会有所帮助。 facebook.github.io/react/docs/….

标签： reactjs react-router reactcsstransitiongroup

【解决方案1】：

在重新阅读react docs 时，我意识到transitionAppear 触发了它自己的css 类（.appear）。添加此类解决了我的问题。

【讨论】：