search

radix-vue / shadcn-vue

Vue port of shadcn-ui
https://www.shadcn-vue.com/
MIT License
4.42k stars 254 forks source link

[Bug]: animations not working #86

Closed maelp closed 11 months ago

maelp commented 11 months ago

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 16.0.0
Package manager: pnpm@8.6.0
Radix Vue version: 1.0.0
Shadcn Vue version: 1.0.0
Vue version: 3.0.0
Nuxt version: 3.0.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.3.3
Client OS: Windows 10 19043.1110
Browser: Chrome 90.0.4430.212

Link to minimal reproduction

none

Steps to reproduce

I installed the library as suggested in the documentation, but when using the component, there is no animation.

Is there something missing in the doc to setup animations with tailwindcss?

Describe the bug

No animations

Expected behavior

Animations

Conext & Screenshots (if applicable)

No response

zernonia commented 11 months ago

What component are you reffering to? And can you share the tailwind.config.js file? 😁 Im suspecting you might be missing tailwindcss-animate

maelp commented 11 months ago

It might be a bit messy but here it goes

Tailwind.config.js

const plugin = require("tailwindcss/plugin");

module.exports = {
  mode: "jit",
  purge: {
    content: ["./src/**/*.{html,vue,ts,js}"],
    options: {
      safelist: [
        {
          pattern: /^(w|h)-/,
        },
        {
          pattern:
            /^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
          variants: ["hover", "focus", "active"],
        },
        {
          pattern:
            /^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
          variants: ["hover", "focus", "active"],
        },
        {
          pattern:
            /^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
          variants: ["hover", "focus", "active"],
        },
        {
          pattern:
            /^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
        },
        {
          pattern:
            /^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
        },
        {
          pattern:
            /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
        },
      ],
    },
  },
  darkMode: false, // or 'media' or 'class',
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [
    plugin(({ matchUtilities }) => {
      matchUtilities({
        perspective: (value) => ({
          perspective: value,
        }),
      });
    }),
  ],
};

postcss config

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

package.json

  "dependencies": {
    "@radix-ui/colors": "^3.0.0-rc.4",
    "@types/axios": "^0.14.0",
    "@vueuse/core": "^10.4.1",
    "axios": "^1.5.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "d3": "^7.4.4",
    "joi": "^17.10.2",
    "lucide-vue-next": "^0.279.0",
    "notiwind": "^2.0.2",
    "radix-vue": "^0.2.3",
    "tailwind-merge": "^1.14.0",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.156.1",
    "vue": "^3.3.4",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@iconify/vue": "^4.1.1",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "5.0.8",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "autoprefixer": "^9.8.8",
    "eslint": "^8.49.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "eslint-plugin-vue": "^8.2.0",
    "postcss": "^8.4.14",
    "prettier": "^3.0.3",
    "process": "^0.11.10",
    "tailwindcss": "^3.1.6",
    "ts-jest": "^27.0.7",
    "typescript": "^4.3.5"
  }

tsconfig compileOptions

  "compilerOptions": {
    "composite": true,
    "target": "es2018",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "noImplicitThis": false,
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "outDir": "dist",
    "rootDir": "src",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/lib-builder/**/*.ts",
    "src/lib-builder/**/*.tsx",
    "src/lib-builder/**/*.vue",
  ],
  "exclude": [
    "node_modules"
  ]

if that helps

zernonia commented 11 months ago

yup as expected.. you are missing

plugins: [require('tailwindcss-animate')],
maelp commented 11 months ago

Thanks! 😅

maelp commented 11 months ago

BTW just a comment, in DialogContent, there are many "overlapping" animation functions? is that intended?

...data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full'
zernonia commented 11 months ago

related issue: https://github.com/radix-vue/shadcn-vue/issues/35