@scss-extend/animate-scss v1.0.1

animate.css 的 scss 实现

支持自由组合 和重写，可无缝引入vite 、 webpack scss 构建的样式中体系中。

内部使用 @minix 实现，保留 class 触发动画同时，支持 scss @extend 、 @include 方式复用重写等。

animate.css 传送门

开始

下载

pnpm install  @scss-extend/animate-scss

vite 引入

css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@use "@scss-extend/animate-scss/animate.scss" as *;`
        },
    },
}

webpack 引入

import '@scss-extend/animate-scss/animate.scss';

使用

三种使用方式

1.class 使用

如果是 sfc 需要对当前组件进项样式scss 设置 否则会解析为css 无法正确触发。<style lang="scss">

<button class="bounce">bounce</button>

2.@extend 使用

<button class="minix-bounce">minix-bounce</button>
<style lang="scss">
    .minix-bounce{
        @extend .bounce;
    }
</style>

3.自由组合使用 可自行调配动画速度及动画效果

<button class="minix-bounce">minix-bounce</button>
<style lang="scss">
    .minix-bounce{
        @include animated;
        @include bounce;
    }
</style>

目前支持动画

attention_seekers

back_entrances

back_exits

bouncing_entrances

bouncing_exits

fading_entrances

fading_exits

flippers

lightspeed

rotating_entrances

rotating_exits

sliding_entrances

sliding_exits

specials

zooming_entrances

zooming_exits

覆盖样式

可新建一个index.scss 在后续引入，覆盖掉内部 @minix 的样式。即可达到自定义。