animation seems not working

[JenuelDev]

I just followed how animation is installed, and how to add the plugin to the windi config file. But then it seems not working.

// installed the package using
npm install --save-dev @windicss/plugin-animations

Sample vue file:

<template>
    <section class="h-100vh flex items-center justify-center">
        <div>
            <div>Hi! <span class="animate-spin">👋</span></div>
            <div>I am <span>Jenuel Ganawed</span></div>
        </div>
    </section>
    <section>sdfsdf</section>
</template>

my windi config file:

export default {
    darkMode: "class",
    plugins: [
        // Other plugins
        require("@windicss/plugin-animations")({
            settings: {
                animatedSpeed: 1000,
                heartBeatSpeed: 1000,
                hingeSpeed: 2000,
                bounceInSpeed: 750,
                bounceOutSpeed: 750,
                animationDelaySpeed: 1000,
            },
        }),
    ],
};

[WsmDyj]

I just followed how animation is installed, and how to add the plugin to the windi config file. But then it seems not working.

// installed the package using
npm install --save-dev @windicss/plugin-animations

Sample vue file:

<template>
    <section class="h-100vh flex items-center justify-center">
        <div>
            <div>Hi! <span class="animate-spin">👋</span></div>
            <div>I am <span>Jenuel Ganawed</span></div>
        </div>
    </section>
    <section>sdfsdf</section>
</template>

my windi config file:

export default {
    darkMode: "class",
    plugins: [
        // Other plugins
        require("@windicss/plugin-animations")({
            settings: {
                animatedSpeed: 1000,
                heartBeatSpeed: 1000,
                hingeSpeed: 2000,
                bounceInSpeed: 750,
                bounceOutSpeed: 750,
                animationDelaySpeed: 1000,
            },
        }),
    ],
};

You should import it this way

import animations from '@windicss/plugin-animations'
export default defineConfig({
  // ...其他配置
   plugins: [
      animations({
        settings: {
         animatedSpeed: 1000,
        // ...
          },
        }),
      ],
})