# anima-focuser

> Focus transform for Anima.

Latest version **2.0.0** (published 2016-06-12) · 0 weekly downloads

## Install

```sh
npm install anima-focuser
pnpm add anima-focuser
yarn add anima-focuser
bun add anima-focuser
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2016-06-12 |
| First published | 2016-06-12 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 羽牧 |
| Maintainers | ishenli |
| Keywords | focuser, slider |

## Links

- npm: https://www.npmjs.com/package/anima-focuser
- npm.io page: https://npm.io/package/anima-focuser

## Dependencies (3)

- [anima-widget](https://npm.io/package/anima-widget.md) ^2.0.0
- [anima-gesture](https://npm.io/package/anima-gesture.md) ^2.0.1
- [anima-yocto-lite](https://npm.io/package/anima-yocto-lite.md) ^2.0.0

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 2.0.0 (latest) — 2016-06-12

## README

# anima-focuser [![spm version](http://spmjs.io/badge/anima-focuser)](http://spmjs.io/package/anima-focuser)

---

焦点转换组件

---

Focuser 继承了 [widget](http://aralejs.org/widget/)，可使用其中 [base](http://aralejs.org/base/)、[class](http://aralejs.org/class/)、[events](http://aralejs.org/events/)、[attribute](http://aralejs.org/base/docs/attribute.html)、[aspect](http://aralejs.org/base/docs/aspect.html) 的属性和方法。

## 72帧大片

![preview](https://t.alipayobjects.com/images/rmsweb/T1WrtgXbVqXXXXXXXX.gif)

## 安装

```
$ spm install anima-focuser --save
```

## 快速使用

#### HTML:

```html
<div class="focuser-wrapper" id="J-wrapper1">
    <div class="focuser-box">
        <div class="focuser-card">Pink</div>
        <div class="focuser-card">Yellow</div>
        <div class="focuser-card">Green</div>
        <div class="focuser-card">Red</div>
        <div class="focuser-card">Blue</div>
    </div>
</div>
```

#### Javascript:

```js
var Focuser = require('anima-focuser');

var focuser = new Focuser({
    wrapper: '#J-wrapper1'
});
```

# API

## 属性

#### wrapper `String` `DOMElement` `Zepto-object`
包裹的层，可以是选择器、DOM 节点或者 Yocto(Zepto) 对象

#### trigger `String`
滑动触发区域，只有两个值可选，`wrapper` 代表最外层，`focus` 代表当前焦点卡片，默认是 `wrapper`

注意：选择 `focus` 后，将只在当前焦点卡片上滑动才会有效果

#### minDisplacement `Number`
触发滑动的最小距离，默认 30 像素

如果想要移动任意距离时就产生滑动效果，可以设置为 0

## 方法

#### forward
向前翻到下一个焦点卡片 `focuser.forward()`

#### backward
向后翻到上一个焦点卡片

#### getCurrent
获得当前焦点的卡片

## 事件

#### beforeArrange
重排触发之前 `focuser.on('beforeArrange', function(e) { ... })`

#### afterArrange
重排触发之后

#### afterPrevTap
前一卡片轻击后

如果想要在点击前一张卡片之后滑动到焦点卡片位置，可以这样使用：

```javascript
focuser.on('afterPrevTap', function() {
    focuser.backward();
});
```

点击后一张卡片同理

#### afterNextTap
后一卡片轻击后

#### afterCurrentTap
当前卡片轻击后

#### afterWrapperTap
包裹外层轻击后

## 外观

修改卡片宽度、高度、间距、动画参数等，可以按 CSS 类名自定义样式去覆盖原来样式

---
_Source: https://npm.io/package/anima-focuser · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._