reactjs - 初始页面加载时的 react 路由器过渡动画

标签 reactjs react-router reactcsstransitiongroup

我想在使用 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})
            )
        )
    }
}

最佳答案

重读react docs我意识到 transitionAppear 触发了它自己的 css 类 (.appear)。添加此类解决了我的问题。

关于reactjs - 初始页面加载时的 react 路由器过渡动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32034411/

相关文章:

html - flickity 轮播无法控制轮播中图像之间的边距

reactjs - 对 Material UI Select 组件的更改使用react测试库

javascript - React.js ... ReactCSSTransitionGroup 有 CDN 吗?

reactjs - 路由更改时停止重新渲染组件。尤其是 Routes 之外的组件

javascript - 切换路线动画

javascript - ReactCSSTransitionGroup 与 ReactJS 15 和 ReactRouter 4

javascript - 为什么我的 reducer 没有收到我的操作? (使用 React 和 Redux)

javascript - Highcharts 区域范围draggableHigh 和draggableLow 不起作用

jquery - reactjs - 在 react 树之外公开 react 组件方法

javascript - 如何使用 React-Router 支持路由中的可选本地化字符串