使用NextUI与Framer Motion时Tooltip快速触发致关键帧报错

快速触发Tooltip hover操作（时长不足200ms）时，页面渲染崩溃，抛出如下错误：

错误信息 #

chunk-3QTN4EH6.js?v=47cbdbc1:9145 Uncaught Error: Only two keyframes currently supported with spring and inertia animations. Trying to animate scale(0.6),scale(0.61547),scale(0.65082),scale(0.69443),scale(0.73944),scale(0.78204),scale(0.82036),scale(0.85368),scale(0.88195),scale(0.90551),scale(0.92487),scale(0.94061),scale(0.95328),scale(0.9634),scale(0.97144),scale(0.97779),scale(0.98278),scale(0.98668),scale(0.98973),scale(0.99209),scale(0.99393),scale(0.99534),scale(0.99644),scale(0.99728),scale(0.99792),scale(0.99842),scale(0.99879),scale(0.99908),scale(0.9993),scale(0.99947),scale(1)
    at invariant (chunk-OCSUDSUG.js?v=47cbdbc1:1714:13)
    at MainThreadAnimation.initPlayback (chunk-OCSUDSUG.js?v=47cbdbc1:3006:9)
    at MainThreadAnimation.onKeyframesResolved (chunk-OCSUDSUG.js?v=47cbdbc1:2353:36)
    at KeyframeResolver.onResolved [as onComplete] (chunk-OCSUDSUG.js?v=47cbdbc1:2991:67)
    at KeyframeResolver.complete (chunk-OCSUDSUG.js?v=47cbdbc1:1927:10)
    at KeyframeResolver.scheduleResolve (chunk-OCSUDSUG.js?v=47cbdbc1:1887:12)
    at new MainThreadAnimation (chunk-OCSUDSUG.js?v=47cbdbc1:2997:19)
    at AcceleratedAnimation.stop (chunk-OCSUDSUG.js?v=47cbdbc1:3445:31)
    at MotionValue.stop (chunk-OCSUDSUG.js?v=47cbdbc1:3843:22)
    at chunk-OCSUDSUG.js?v=47cbdbc1:6796:15

相关截图与代码 #

Tooltip未hover状态 #

Tooltip hover状态代码 #

<div className="max-w-md:hidden relative flex justify-center items-center gap-3 text-center w-full">
              <Tooltip color="secondary" content="Details">
                <span className="text-lg text-default-500 cursor-pointer active:opacity-50">
                  <AiFillEye />
                </span>
              </Tooltip>
              <Tooltip color="secondary" content="Edit user">
                <span className="text-lg text-default-400 cursor-pointer active:opacity-50">
                  <BiEdit />
                </span>
              </Tooltip>
              <Tooltip color="danger" content="Delete user">
                <span className="text-lg text-danger cursor-pointer active:opacity-50">
                  <MdDelete />
                </span>
            </Tooltip>
</div>

Tooltip hover状态 #

Main.tsx #

import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.scss';
import { ApolloProvider } from '@apollo/client';
import client from '@/graphql/apollo-client.ts';
import { NextUIProvider } from '@nextui-org/react';
import { Provider } from 'react-redux';
import { store } from '@/redux';
import React from 'react';
// import './config/i18n.ts';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ApolloProvider client={client}>
      <Provider store={store}>
        <NextUIProvider>
          <App />
        </NextUIProvider>
      </Provider>
    </ApolloProvider>
  </React.StrictMode>,
);

tailwind.config.js #

const {nextui} = require("@nextui-org/react");

/** @type {import('tailwindcss').Config} */

export default {
  content: [
    './index.html',
    './src/**/*.{js,ts,jsx,tsx}',
    "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [nextui({
    themes: {
      light: {
        colors: {
          background: "#FFFFFF", // or DEFAULT
          foreground: "#11181C", // or 50 to 900 DEFAULT
          primary: {
            //... 50 to 900
            foreground: "#FFFFFF",
            DEFAULT: "#EE4037",
          },
          default: {
            //... 50 to 900
            foreground: "#000000",
            DEFAULT: "rgba(236,236,236,0.85)",
          },
          secondary: {
            //... 50 to 900
            foreground: "#FFFFFF",
            DEFAULT: "#30445C",
          },
        },
      },
  }})],
};

依赖包版本 #

"@apollo/client": "^3.7.14",
    "@graphql-codegen/near-operation-file-preset": "^2.5.0",
    "@heroicons/react": "^2.0.18",
    "@nextui-org/react": "^2.2.10",
    "@nextui-org/theme": "^2.2.3",
    "@reduxjs/toolkit": "^2.2.3",
    "axios": "^1.4.0",
    "clsx": "^1.2.1",
    "cross-fetch": "^3.1.6",
    "flowbite": "^1.6.5",
    "framer-motion": "^11.0.20",
    "graphql": "^16.6.0",
    "i18next": "^23.10.1",
    "i18next-http-backend": "^2.5.0",
    "jsdom": "^22.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hot-toast": "^2.4.1",
    "react-i18next": "^14.1.0",
    "react-icons": "^5.0.1",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.11.1",
    "sass": "^1.74.1"

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