Question

我尝试在单击动画时增加整个页面上的元素，该元素也是路由器的链接。一定是类似that的东西，但是当我们在主页上降价时会带有反向动画。

我搜索了很多解决方案。但是我对react router v4的理解没有回调用于在开始动画元素上添加我的样式位置以及在动画结束时删除我的样式位置。我发现需要使用react router 2和react-router-page-transition的示例。而且我还使用redux，因此当我们单击“链接路由器到主页”以在主页上开始反向动画时，我可以添加操作。

但是我找不到反向解决方案并添加不好的方法，在单击“链接路由器”时，我再次调用我的函数以启动动画，但是具有另一个样式属性。

而且我还需要添加一个动画来显示元素下的背景（例如在某些模式窗口中）。在主页中，单击链接元素后，我仅通过引用添加衬底元素的类。而且我认为它不是更好的解决方案。

当我在主页上放弃时，如何反转动画？也许还有其他解决方案或插件？

我认为也许可以尝试pose react animation来制作路线动画，当我离开页面时，我在文档中看到的还有反向动画回调。

带有动画的组件

class TileItem extends Component{
    constructor(props){
        super(props);

        this.state = {
            doTransform: false,
            position: null,
        };
    }


    onTransitionWillStart(data) {
        // Start position of the page
        this.setState({
            doTransform: true,
            position: data,
        });

    }

    onTransitionDidEnd() {
        // Transition is done, do your stuff here
    }

    transitionManuallyStart() {
        // When this method exsits, `transition-appear-active` will not be added to the dom
        // we will define our animation manually.
        this.setState({
            position: {
                top: 0,
                height: '100%',
                width: '100%',
                left: 0,
                right: 0,
            },
            doTransform: true,
        });
    }

    transitionManuallyStop() {
        // When this method exsits, `transition-appear-active` will not be removed
        this.setState({
            doTransform: false,
        });
    }

    test = () => {
        this.setState({
            position: {
                top: this.props.TileItem.style.top,
                height: this.props.TileItem.style.height,
                width: this.props.TileItem.style.width,
                left: this.props.TileItem.style.left,
                right: this.props.TileItem.style.right,
            },
            doTransform: true,
        });
    };

    get elementIndex(){
        return  this.props.location.state.index ? this.props.location.state.index : this.props.TileItem.index;
    }

    render(){
        return(
            <Link
                to={'/'}
                className="transition-item single-tile"
                onClick={this.test}
                style={{
                backgroundColor: this.props.Tiles[this.elementIndex].backgroundColor,
                transform: this.state.doTransform ?
                    `translate3d(0, ${this.state.position.top}px, 0)` :
                    undefined,
                height: this.state.doTransform ?
                    this.state.position.height : null,
                width: this.state.doTransform ?
                    this.state.position.width : null,
                left: this.state.doTransform ?
                    this.state.position.left : null,
                right: this.state.doTransform ?
                    this.state.position.left : null,
            }}/>
        )
    }
}

切换反应路由器时如何做反向动画？

0 个答案: