illli/README.md

微信小程序 WXSS 样式库，简洁高效的UI组件、动画和样式类集合

# illli 微信小程序 WXSS 样式库

illli 是一个简洁高效的微信小程序样式库，提供了常用的 UI 组件和样式类。

## 安装

```bash
npm install illli
```

## 使用方法

### 初始化项目

```bash
npx illli init
```

这个命令会在你的项目中创建一个 `illli` 文件夹，并将 `illli.wxss` 文件保存到该文件夹中。然后会自动将 `illli.wxss` 引入到你的 `app.wxss` 文件中。

### 添加单个组件

```bash
npx illli add button
```

这个命令会将 button 组件下载到 `illli/components` 文件夹中，并在 `illli.wxss` 文件中添加引用。

### 安装所有组件

```bash
npm install illli
```
或者
```bash
npx illli
```

这两个命令都会下载所有组件到 `illli/components` 文件夹中，并在 `illli.wxss` 文件中添加所有组件的引用。

### 查看所有可用组件

```bash
npx illli list
```

### 查看组件用法帮助

```bash
npx illli help button
```

## 可用组件

- button: 按钮组件
- card: 卡片组件
- list: 列表组件
- tag: 标签组件
- form: 表单组件
- avatar: 头像组件
- layout: 布局组件
- utils: 工具类
- animations: 动画效果组件
- transitions: 过渡效果组件

## 组件使用示例

### 按钮组件

```html
<!-- 基础按钮 -->
<view class="btn">按钮</view>

<!-- 主要按钮 -->
<view class="btn btn-primary">主要按钮</view>

<!-- 危险按钮 -->
<view class="btn btn-danger">危险按钮</view>

<!-- 动画按钮 -->
<view class="btn btn-primary btn-ripple">波纹按钮</view>
<view class="btn btn-primary btn-pulse">脉冲按钮</view>
<view class="btn btn-gradient-primary">渐变按钮</view>
```

### 卡片组件

```html
<!-- 基础卡片 -->
<view class="card">
  <view class="card-body">卡片内容</view>
</view>

<!-- 带标题的卡片 -->
<view class="card">
  <view class="card-header">卡片标题</view>
  <view class="card-body">卡片内容</view>
</view>

<!-- 带过渡效果的卡片 -->
<view class="card card-transition">悬停时有动画效果</view>
```

### 动画组件

```html
<!-- 基础动画 -->
<view class="animate fade-in">淡入效果</view>
<view class="animate zoom-in">缩放效果</view>
<view class="animate slide-in-left">从左滑入</view>

<!-- 动画速度控制 -->
<view class="animate animate-slow fade-in">慢速淡入</view>
<view class="animate animate-fast fade-in">快速淡入</view>

<!-- 循环动画 -->
<view class="animate animate-infinite pulse">脉冲效果</view>
<view class="animate animate-infinite rotate">旋转效果</view>
```

### 过渡效果组件

```html
<!-- 基础过渡 -->
<view class="transition">基础过渡效果</view>

<!-- 悬停效果 -->
<view class="hover-scale">缩放效果</view>
<view class="hover-lift">上浮效果</view>

<!-- 特殊过渡效果 -->
<view class="btn btn-transition">按钮过渡</view>
<view class="card card-transition">卡片过渡</view>
```

### 骨架屏

```html
<!-- 基础骨架屏 -->
<view class="skeleton skeleton-text"></view>
<view class="skeleton skeleton-avatar"></view>

<!-- 带动画效果的骨架屏 -->
<view class="skeleton-gradient skeleton-text"></view>
<view class="skeleton-blink skeleton-text"></view>

<!-- 加载完成后动画 -->
<view class="skeleton-fade-in">内容已加载</view>
```

## 主题变量

illli 提供了一组 CSS 变量，方便你自定义样式：

```css
:root {
  --color-primary: #07C160;
  --color-danger: #FA5151;
  --color-warning: #FFC300;
  --color-info: #10AEFF;
  --color-dark: #333333;
  --color-light: #F7F7F7;
  --color-white: #FFFFFF;
  --color-border: #EEEEEE;
  
  --font-size-xs: 24rpx;
  --font-size-sm: 28rpx;
  --font-size-md: 32rpx;
  --font-size-lg: 36rpx;
  --font-size-xl: 40rpx;
  
  --radius-sm: 4rpx;
  --radius-md: 8rpx;
  --radius-lg: 16rpx;
  
  --spacing-xs: 5rpx;
  --spacing-sm: 10rpx;
  --spacing-md: 20rpx;
  --spacing-lg: 30rpx;
  
  /* 动画变量 */
  --animation-duration-fast: 0.3s;
  --animation-duration-normal: 0.5s;
  --animation-duration-slow: 1s;
  
  --transition-timing-function: ease;
  --transition-timing-function-ease-in: ease-in;
  --transition-timing-function-ease-out: ease-out;
  --transition-timing-function-ease-in-out: ease-in-out;
}
```

## 动画与过渡效果

illli 样式库现在提供了丰富的动画和过渡效果，可以轻松为您的小程序界面添加生动的交互体验：

### 动画类型

- **淡入淡出**: fade-in, fade-out
- **缩放**: zoom-in, zoom-out
- **滑动**: slide-in-left, slide-in-right, slide-in-up, slide-in-down
- **旋转**: rotate
- **脉冲**: pulse
- **弹跳**: bounce
- **摇晃**: shake
- **闪烁**: flash

### 过渡效果

- **基础过渡**: transition
- **悬停效果**: hover-scale, hover-lift, hover-opacity
- **特殊过渡**: btn-transition, card-transition, color-transition, border-transition, shape-transition

### 用法示例

```html
<!-- 组合使用动画 -->
<view class="animate slide-in-up animate-slow">慢速从底部滑入</view>

<!-- 使用无限循环动画 -->
<view class="btn btn-primary">
  <view class="animate animate-infinite pulse">脉动按钮</view>
</view>

<!-- 使用过渡效果 -->
<view class="card card-transition">
  <view class="card-body">悬停时有阴影和上浮效果</view>
</view>
```

## 许可证

MIT