javascript - 在 Qwik 中动态分配类别

Question

我是 Qwik 新手，并尝试有条件地从导航栏组件中的项目中添加/删除类。复杂的是我正在使用 tailwind 并且我想有条件地添加/删除 tailwind 类(使用自定义动画)，但它似乎没有效果。我读过有关使用 clsx 在 React 中执行类似操作的内容，但这似乎在 Qwik 中不可用。有没有办法动态添加 tailwind 类，或者我怎样才能达到相同的结果？

组件

import { $, component$, useStore } from '@builder.io/qwik';
import { Link } from '@builder.io/qwik-city';

export const Navigation = component$(() => {

  const baseClass = "py-2 bg-white text-black w-[100px]";

  const menuItems = useStore([
    { label: "Home", value: "/", class: baseClass },
    { label: "About", value: "/about", class: baseClass },
    { label: "Contact Us", value: "/contact", class: baseClass },
  ]);

  const fadeout = $((num: number) => {
    menuItems.forEach((ele, i) => {
      if(i < num && !ele.class.includes("animate-fadeout")) {
      ele.class = baseClass + " animate-fadeout";
      }
    })
  });

  const fadein = $((num: number) => {
    menuItems.forEach((ele, i) => {
      if(i < num && ele.class.includes("animate-fadeout")) {
      ele.class = baseClass + " animate-fadein";
      }
    })
  });

  return (
    <div class="flex flex-col space-y-2 py-2 bg-slate-500">
      {menuItems.map((item, index) => (
        <Link className={item.class} key={index} onMouseOver$={() => fadeout(index)} onMouseOut$={() => fadein(index)} href={item.value}>{item.label}</Link>
      ))}
    </div>
  )
});

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      keyframes: {
        fadein: {
          '0%': { transform: 'translateY(-175%)', opacity: '0'},
          '10%': { transform: 'translateY(-150%)', opacity: '1'},
          '50%': { transform: 'translateY(0)'}
        },
        fadeout: {
          '50%': { transform: 'translateY(-175%)', opacity: '0'},
          '40%': { transform: 'translateY(-150%)', opacity: '1'},
          '0%': { transform: 'translateY(0)'}
        }
      },
      animation: {
        fadeout: 'fadeout 1s ease-in-out 1',
        fadein: 'fadein 1s ease-in-out 1',
      }
    },
  },
  plugins: [],
};

Answer 1

您在调用 useStore 时缺少 {deep: true} 作为选项。这将使信号正常工作。

另请查看qwik-transition如果你想做这样的转换。

此外，你不能使用 :hover 来实现你想要的吗？

最后，我会制作一个 MenuItem 组件$，而不是在导航中组合所有内容。