响应中的动画页面转换

Question

过去几周我一直在使用React开发应用程序.到目前为止一切正常,但现在我想添加一些过渡.这些转换比我设法找到的任何示例都复杂一些.

我有2页,概述和详细页面,我想在它之间转换.

我正在使用react-router来管理我的路由:

<Route path='/' component={CoreLayout}>

  <Route path=':pageSlug' component={Overview} />
  <Route path=':pageSlug/:detailSlug' component={DetailView} />

</Route>

概述如下所示:

Detailview看起来像这样:

转换的想法是您单击概述的其中一个元素.单击此元素将移动到detailView上应该具有的位置.过渡应该通过路线改变(我认为)来启动,并且也应该能够反过来发生.

我已经尝试过使用ReactTransitionGroupLayout,它有一个渲染方法,如下所示:

render () {
    return (
        <div className='layout'>
            <ReactTransitionGroup>
                React.cloneElement(this.props.children, { key: this.props.location.pathname })
            </ReactTransitionGroup>
        </div>
    )
}

这将使子组件能够接收特殊的生命周期钩子.但是我想在这些钩子中以某种方式访问​​子组件,并且仍然以React方式继续操作.

有人能指出我正确的方向,以便采取下一步措施吗？或者也许请指出一个我可能错过某个地方的例子？在之前的项目中,我使用Ember和液体火来获得这些过渡,React可能有类似的东西吗？

我正在使用react/react-redux/react-router/react-router-redux.

Answer 1

编辑：添加了一个工作示例

https://lab.award.is/react-shared-element-transition-example/

（适用于macOS的Safari中的一些问题对我而言）

想法是将要制作动画的元素包装在一个容器中，该容器在安装时会存储其位置。我创建了一个简单的React Component SharedElement来完成此任务。

因此，请逐步执行您的示例（Overview查看和Detailview）：

1. 该Overview观点被安装。概述中的每个项目（正方形）均以SharedElement唯一的ID（例如item-0，item-1等）包装在中。该SharedElement组件将每个项目的位置存储在静态Store变量中（通过您赋予它们的ID）。
2. 您导航到Detailview。Detailview被包装到另一个SharedElementID中，该ID与您单击的项目具有相同的ID，例如item-4。
3. 现在这一次，SharedElement看到具有相同ID的项目已经在其商店中注册。它将克隆新元素，将旧元素位置应用到该位置（Detailview中的位置），并设置动画到新位置（我使用GSAP做到了）。动画完成后，它将覆盖商店中商品的新位置。

使用此技术，它实际上独立于React Router（没有特殊的生命周期方法componentDidMount），甚至在首先登陆“概述”页面并导航到“概述”页面时，它也可以工作。

我将与您共享实现，但是请注意，它存在一些已知的错误。例如，您必须处理z-indeces并溢出自己；并且它还不能处理从商店中注销元素的位置。我很确定，如果有人可以花些时间在上面，那么您可以用它制作一个很棒的小插件。

实现：

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

import Overview from './Overview'
import DetailView from './DetailView'

import "./index.css";

import { Router, Route, IndexRoute, hashHistory } from 'react-router'

const routes = (
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Overview} />
            <Route path="detail/:id" component={DetailView} />
        </Route>
    </Router>
)

ReactDOM.render(
    routes,
    document.getElementById('root')
);

App.js

import React, {Component} from "react"
import "./App.css"

export default class App extends Component {
    render() {
        return (
            <div className="App">
                {this.props.children}
            </div>
        )
    }
}

Overview.js-注意SharedElement上的ID

import React, { Component } from 'react'
import './Overview.css'
import items from './items' // Simple array containing objects like {title: '...'}
import { hashHistory } from 'react-router'
import SharedElement from './SharedElement'

export default class Overview extends Component {

    showDetail = (e, id) => {
        e.preventDefault()

        hashHistory.push(`/detail/${id}`)
    }

    render() {
        return (
            <div className="Overview">
                {items.map((item, index) => {
                    return (
                        <div className="ItemOuter" key={`outer-${index}`}>
                            <SharedElement id={`item-${index}`}>
                                <a
                                    className="Item"
                                    key={`overview-item`}
                                    onClick={e => this.showDetail(e, index + 1)}
                                >
                                    <div className="Item-image">
                                        <img src={require(`./img/${index + 1}.jpg`)} alt=""/>
                                    </div>

                                    {item.title}
                                </a>
                            </SharedElement>
                        </div>
                    )
                })}
            </div>
        )
    }

}

DetailView.js-注意SharedElement上的ID

import React, { Component } from 'react'
import './DetailItem.css'
import items from './items'
import { hashHistory } from 'react-router'
import SharedElement from './SharedElement'

export default class DetailView extends Component {

    getItem = () => {
        return items[this.props.params.id - 1]
    }

    showHome = e => {
        e.preventDefault()

        hashHistory.push(`/`)
    }

    render() {
        const item = this.getItem()

        return (
            <div className="DetailItemOuter">
                <SharedElement id={`item-${this.props.params.id - 1}`}>
                    <div className="DetailItem" onClick={this.showHome}>
                        <div className="DetailItem-image">
                            <img src={require(`./img/${this.props.params.id}.jpg`)} alt=""/>
                        </div>
                        Full title: {item.title}
                    </div>
                </SharedElement>
            </div>
        )
    }

}

SharedElement.js

import React, { Component, PropTypes, cloneElement } from 'react'
import { findDOMNode } from 'react-dom'
import TweenMax, { Power3 } from 'gsap'

export default class SharedElement extends Component {

    static Store = {}
    element = null

    static props = {
        id: PropTypes.string.isRequired,
        children: PropTypes.element.isRequired,
        duration: PropTypes.number,
        delay: PropTypes.number,
        keepPosition: PropTypes.bool,
    }

    static defaultProps = {
        duration: 0.4,
        delay: 0,
        keepPosition: false,
    }

    storeNewPosition(rect) {
        SharedElement.Store[this.props.id] = rect
    }

    componentDidMount() {
        // Figure out the position of the new element
        const node = findDOMNode(this.element)
        const rect = node.getBoundingClientRect()
        const newPosition = {
            width: rect.width,
            height: rect.height,
        }

        if ( ! this.props.keepPosition) {
            newPosition.top = rect.top
            newPosition.left = rect.left
        }

        if (SharedElement.Store.hasOwnProperty(this.props.id)) {
            // Element was already mounted, animate
            const oldPosition = SharedElement.Store[this.props.id]

            TweenMax.fromTo(node, this.props.duration, oldPosition, {
                ...newPosition,
                ease: Power3.easeInOut,
                delay: this.props.delay,
                onComplete: () => this.storeNewPosition(newPosition)
            })
        }
        else {
            setTimeout(() => { // Fix for 'rect' having wrong dimensions
                this.storeNewPosition(newPosition)
            }, 50)
        }
    }

    render() {
        return cloneElement(this.props.children, {
            ...this.props.children.props,
            ref: element => this.element = element,
            style: {...this.props.children.props.style || {}, position: 'absolute'},
        })
    }

}