成帧器运动中的页面过渡动画（React）答案

【问题标题】：Page transition animation in framer motion (React)成帧器运动中的页面过渡动画（React）
【发布时间】：2021-11-19 20:44:11
【问题描述】：

正如标题所说，我想在 React Js 中使用成帧器运动进行类似 https://allhero.co.jp 的页面转换

我试过了：

.anim-page{
    &,._red{
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index:999;
    }
    &._black{
      background-color: black;
    }
    ._red{
      background-color: red;
    }
  }
//-------------------------------------
const page_anim = {
    red: {
      hidden: { scaleX: 0 },
      visible: {
        scaleX: [1, 0],
        transformOrigin: 'right',
        transition: { duration: 0.5, {delay:0.3} },
      },
    },
    black: {
      hidden: { right: '100%' },
      visible: {
        // skewX: ['-25deg', '0deg'],
        right: '0%',
        transition: { duration: 0.7 },
      },
    },
  }

// -----------------------------------
<motion.div
          className='anim-page _black'
          variants={page_anim.black}
          initial='hidden'
          animate='visible'
        >
          <motion.div className='_red' variants={page_anim.red}></motion.div>
        </motion.div>

看起来有点像，但我不知道这是否是正确的做法，而且看起来并不多。重要的是我想让它可重复使用。我喜欢加载页面时黑色消失的功能

【问题讨论】：

标签： reactjs animation framer-motion page-transition

【解决方案1】：

我认为这是一个 gsap 的事情，但我做到了，不是很好，但我喜欢它

AnimLoading.jsx

import { motion } from 'framer-motion'

import React from 'react'
const AnimLoading = () => {
  const page_anim = {
    red: {
      hidden: { scaleX: 0 },
      visible: {
        scaleX: [1, 0],
        transformOrigin: 'right',
        transition: { duration: 0.4, delay: 0.2 },
      },
    },
    black: {
      hidden: { right: '100%' },
      visible: {
        skewX: ['0deg', '-5deg', '0deg'],
        right: ['100%', '0%'],
        transition: { duration: 0.5 },
      },
      done: {
        right: '-100%',
        skewX: ['0deg', '-5deg', '0deg'],
        transition: { duration: 0.5 },
      },
    },
    text: {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { delay: 0.4 } },
      done: { opacity: 0 },
    },
  }

  return (
    <motion.div
      className='anim-page _black'
      variants={page_anim.black}
      initial='hidden'
      animate='visible'
      exit='done'
    >
      <motion.div className='_red' variants={page_anim.red}></motion.div>
      <motion.h1 variants={page_anim.text} className='text-norm light'>
        LOADING...
      </motion.h1>
    </motion.div>
  )
}

export default AnimLoading

一点scss

.anim-page{
    &,._red{
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      z-index:999;
    }
    &._black{
      background-color: ${({ theme }) => theme.bg_light};
      box-shadow: 0 2px 7px ${({ theme }) => theme.shadow_1};
    }
    ._red{
      width: 70%;
      right: 0;
      background-color: ${({ theme }) => theme.bg_blue};
    }
    h1{
      line-height: 100vh;
      font-size:7vw;
      display: grid;
      place-items: center;
    }
  }

App.js

const route = location.pathname.split('/')[1]
const [animate, setAnimate] = useState(false)

  useEffect(() => {
    setAnimate(true)
    setTimeout(() => {
      setAnimate(false)
    }, 1000)
  }, [route])

<AnimatePresence>{animate && <AnimLoading />}</AnimatePresence>

我正在使用 React Router，这会在路由更改时发生...

【讨论】：