8

我在ReactJS和GatsbyJS (V2) 项目中使用react-transition-group 。

我的页面过渡与动画一起使用，但是当Link退出时，exiting动画被剪短，因为下一页已准备好进入。

我尝试过延迟Link操作，但是当页面更改被延迟时，exit动画不会触发，直到delay结束并且Link被操作。

如何在启动动画delay时更改页面？或者，有没有更好的方法或可用的？exitingonClickprops

这是我的代码

布局.js

class Layout extends React.Component {
  ...
  return (
    <Transition>{children}</Transition>
  );
}

过渡.js

class Transition extends React.Component {
constructor(props) {
    super(props);
    this.state = { exiting: false };
    this.listenerHandler = this.listenerHandler.bind(this);
  }

  listenerHandler() {
    this.setState({ exiting: true });
  }

  componentDidMount() {
    window.addEventListener(historyExitingEventType, this.listenerHandler);
  }

  componentWillUnmount() {
    window.removeEventListener(historyExitingEventType, this.listenerHandler);
  }

  static getDerivedStateFromProps({ exiting }) {
    if (exiting) {
      return { exiting: false };
    }
    return null;
  }

  render() {
    const transitionProps = {
      timeout: {
        enter: 0,
        exit: timeout
      },
      appear: true,
      in: !this.state.exiting
    };

    return (
      <ReactTransition {...transitionProps}>
        {status => (
          <div
            style={{
              ...getTransitionStyle({ status, timeout })
            }}
          >
            {this.props.children}
          </div>
        )}
      </ReactTransition>
    );
  }
}

export default Transition;

盖茨比-config.js

import createHistory from 'history/createBrowserHistory';

const timeout = 1500;
const historyExitingEventType = `history::exiting`;

const getUserConfirmation = (pathname, callback) => {
  const event = new CustomEvent(historyExitingEventType, {
    detail: { pathname }
  });
  window.dispatchEvent(event);
  setTimeout(() => {
    callback(true);
  }, timeout);
};

let history;
if (typeof document !== 'undefined') {
  history = createHistory({ getUserConfirmation });
  history.block(location => location.pathname);
}

export const replaceHistory = () => history;

export { historyExitingEventType, timeout };

getTransitionStyle.js

const getTransitionStyles = timeout => {

return {
    entering: {
      transform: `scale(1.05) translateZ(0)`,
      opacity: 0
    },
    entered: {
      transition: `transform 750ms ease, opacity ${timeout}ms ease`,
      transitionDelay: `750ms`,
      transform: `scale(1) translateZ(0)`,
      opacity: 1
    },
    exiting: {
      transition: `transform 750ms ease, opacity ${timeout}ms ease`,
      transform: `scale(0.98) translateZ(0)`,
      opacity: 0
    }
  };
};

const getTransitionStyle = ({ timeout, status }) =>
  getTransitionStyles(timeout)[status];

export default getTransitionStyle;
4

1 回答 1

4

Gatsby v2 使用的是 Reach Router 而不是 React Router，所以使用getUserConfirmationwithreplaceHistory将不再有效。在 Gatsby v2 RC 中，您可以react-pose更直接地创建页面转换：

gatsby-browser.js和gatsby-ssr.js：

import React from "react"
import Transition from "./src/components/transition"
 export const wrapPageElement = ({ element, props }) => {
  return <Transition {...props}>{element}</Transition>
}

transition.js组件：

import React from "react"
import posed, { PoseGroup } from "react-pose"

const timeout = 250

class Transition extends React.PureComponent {
  render() {
    const { children, location } = this.props

    const RoutesContainer = posed.div({
      enter: { delay: timeout, delayChildren: timeout },
    })

    // To enable page transitions on mount / initial load,
    // use the prop `animateOnMount={true}` on `PoseGroup`.
    return (
      <PoseGroup>
        <RoutesContainer key={location.pathname}>{children}</RoutesContainer>
      </PoseGroup>
    )
  }
}

export default Transition

在您的页面内：

// Use `posed.div` elements anywhere on the pages.

const Transition = posed.div({
  enter: {
    opacity: 1,
  },
  exit: {
    opacity: 0,
  },
})

// ...

<Transition>Hello World!</Transition>

查看官方示例以获取工作演示。

于 2018-08-23T17:47:53.417 回答