mangosteen day 2

React Router动画实践

写样式的方法

CSS Modules

需要注意的是需要创建一个scss的文件 里面用来写css 然后可以直接调用里面的样式（会帮你在样式名后面生成随机数以确保不重名）

• 1.选择器的复用 (完全等价）

  
  

• 2.当我们需要一个对象是有很多个类名 可以利用数组后面加上join

  
  

Style Components

优点：可以不用写CSS文件 也不用自己想类名 因为类名已经被赋值为随机数

unocss

表驱动编程

数据结构是静态的算法
例如可以利用类似于列表 对象中key value一一对应
让其能够在地址不同的时候 跳转到另一个地址栏

优化动画的细节

为了让用户能够打开页面的时候图片不闪烁
可以设置图片的宽高 这样可以避免图片加载慢带来的图片闪烁

对于初步的welcomelayout这个框架

import { animated, useTransition } from '@react-spring/web'
import { ReactNode, useState } from 'react'
import { useRef } from 'react'
import { Link, useLocation, useOutlet } from 'react-router-dom'
import logo from '../assets/images/logo.svg'
const linkMap = {//利用到的是表驱动编程 可以有这种一一对应的关系将不同path下对应的pages联系起来
  '/welcome/1': '/welcome/2',
  '/welcome/2': '/welcome/3',
  '/welcome/3': '/welcome/4',
  '/welcome/4': '/welcome/xxx',
}
export const WelcomeLayout: React.FC = () => {
  const [extraStyle, setExtraStyle] = useState({position:'relative'})//利用usestate 将extraStyle中初始化postition：'ralative 便于后面让子元素在执行动画的过程中变化style
  const map = useRef<Record<string, ReactNode>>({})
  const location = useLocation()//得到当前地址栏的地址
  const outlet = useOutlet()//useOutlet可以拿到<OutLet/>占位容器内所存放的组件对象
  console.log("outlet:" )
  console.log(outlet)
  map.current[location.pathname] = outlet//将outlet中存放的组件对象一一赋值给map中的对应的不同的loaction.path
  const transitions = useTransition(location.pathname, {
    from: { transform: location.pathname === '/welcome/1' ? 'translateX(0%)' : 'translateX(100%)' },
    enter: { transform: 'translateX(0%)' },
    leave: { transform: 'translateX(-100%)' },
    config: { duration: 300 },
    onStart: () => {//开始执行时动画时操作
      setExtraStyle({ position: 'absolute'})
    },
    onRest: () => {//结束执行动画时操作
      setExtraStyle({ position: 'relative'})
    }
  })
  //h-screen意思是高度与屏幕一样 主语需要的flex布局 
  //justify-center items-center可以直接让flex布局中的元素纵向横向居中
  //grow-1是指的所在的那个元素会在没有兄弟元素占满父元素的前提下 自己优先去沾满
  //而item-stretch则是自己的子元素会自动撑满自己
  return (
    <div className= 'bg-#5f34bf' h-screen flex flex-col items-stretch pb-16px> 
      <header shrink-0 text-center pt-64px>
        <img src={logo} />
        <h1>山竹记账</h1>
      </header>
      <main shrink-1 grow-1   m-16px relative> 
        {transitions((style, pathname) =>
          <animated.div key={pathname} style={{...style, ...extraStyle}}  flex  w="100%" h="100% "  p-16px>
            <div bg-white  flex justify-center items-center rounded-8px grow-1>
              {map.current[pathname]}
            </div>
            
          </animated.div>
        )}
      </main>
      <footer text-24px text-white text-center  grid grid-cols-3 grid-rows-1 shrink-0>
        <Link style={{ gridArea: '1 / 2 / 2 / 3 '}} to={linkMap[location.pathname]}>下一页</Link>
        <Link style={{ gridArea: ' 1 / 3 / 2 / 4 '}} to="/welcome/xxx">跳过</Link>
      </footer>
    </div>
  )
}