React/TypeScript中如何实现点击触发的类Stack堆叠动画效果

实现方案 #

React Spring完全适配你的需求，是当前场景下的最优解：它基于物理弹簧动画实现，效果和你需要的底部弹出堆叠效果高度匹配，同时完美支持React/TS和Hooks写法，和Tailwind CSS配合也没有冲突，比手动写CSS transition的状态管理逻辑简洁很多。

具体实现步骤 #

• 先安装依赖：

pnpm add @react-spring/web
# 也可以用npm/yarn执行对应安装命令

• 用useState管理堆叠容器的显示状态/堆叠列表，用useSpring控制动画属性：从底部滑入的位移、入场透明度、轻微的缩放效果
• 给堆叠容器设置Tailwind的fixed bottom-0 left-0 w-full z-[10]定位，保证层级高于原有容器

改造后的组件示例代码 #

import { FC, useState } from 'react'
import { useSpring, animated } from '@react-spring/web'

export const HomeLaunchShop: FC = () => {
  // 控制堆叠容器是否展示，需要多层堆叠时可以把布尔值替换为数组维护堆叠列表
  const [showStack, setShowStack] = useState(false)

  // 定义弹出动画，参数可以按需调整匹配目标动效手感
  const stackAnimation = useSpring({
    from: {
      y: '100%',
      opacity: 0,
      scale: 0.95
    },
    to: {
      y: showStack ? '0%' : '100%',
      opacity: showStack ? 1 : 0,
      scale: showStack ? 1 : 0.95
    },
    config: {
      tension: 280,
      friction: 24
    }
  })

  return (
    <div className="relative min-h-screen">
      {/* 原有基础容器内容 */}
      <div>
        <form>
          <div>
            <a>This is first container</a>
          </div>
          <div>
            <input
              className={s.input}
              name="phone"
              type="tel"
              maxLength={13}
              value="xxx-xxxx-xxxx"
              readOnly
            />
          </div>
        </form>
      </div>
      <div>
        <Button
          title={'Try Payment'}
          onClick={() => setShowStack(true)}
        />
      </div>

      {/* 堆叠弹出容器 */}
      <animated.div
        style={stackAnimation}
        className="fixed bottom-0 left-0 w-full z-10 bg-white rounded-t-2xl shadow-lg p-6"
      >
        <p>This is new stacked container</p>
        <button onClick={() => setShowStack(false)} className="mt-4">关闭</button>
      </animated.div>
    </div>
  )
}

如果需要支持多层堆叠，只需要给每一层设置对应的z-index和偏移量即可，React Spring支持批量动画控制，逻辑拓展非常方便。

内容的提问来源于stack exchange，提问作者husky