# vue-ans-velocity

> 基于animate.css，封装Vue显示/隐藏动画组件。

Latest version **1.1.0** (published 2022-08-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-ans-velocity
pnpm add vue-ans-velocity
yarn add vue-ans-velocity
bun add vue-ans-velocity
```

## 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 | 1.1.0 |
| Published | 2022-08-31 |
| First published | 2022-05-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | chenzhaoyang |

## Links

- npm: https://www.npmjs.com/package/vue-ans-velocity
- npm.io page: https://npm.io/package/vue-ans-velocity

## Dependencies (2)

- [animate.css](https://npm.io/package/animate.css.md) ^4.1.1
- [velocity-animate](https://npm.io/package/velocity-animate.md) ^1.5.2

## Recent versions

- 1.1.0 (latest) — 2022-08-31
- 1.0.4 — 2022-05-12
- 1.0.3 — 2022-05-12
- 1.0.2 — 2022-05-12
- 1.0.1 — 2022-05-12
- 1.0.0 — 2022-05-12
- 0.0.1 — 2022-05-12

## README

##### 简介：

vue-ans-velocity是一个适用于目前超火的前端vue框架的一个动画依赖包。其使用简单，可用性高，大大提高了前端开发人员的工作效率。该依赖包主要解决了vue中动态/静态显示隐藏的动画切换效果，主要继承了 jQuery.js 中的淡入淡出(fade)，滑动(slide)以及animate.css切换动画集合。



##### 使用步骤：

1.安装

```
npm install vue-ans-velocity
```



2.vue-cli 中 main.js 引入 并且注册为vue全局组件

```javascript
import Ans from "vue-ans-velocity"

Vue.component("ANS", Ans);
```



3.使用案例：

```vue
<!-- ans-show属性用于控制显示动画，ans-hide属性用于控制隐藏动画 -->
<!-- jquery.js ===> slide 切换效果： -->
<ANS>
  <div v-show="slideToggle" ans-show="slideDown" ans-hide="slideUp">
    <div class="inner slide"></div>
  </div>
</ANS>
<!-- animate.css ===> roll 切换效果： -->
<ANS>
  <div v-show="rollToggle" ans-show="rollIn" ans-hide="rollOut">
    <div class="inner roll">
      <h1>h1</h1>
      <h2>h2</h2>
      <h3>h3</h3>
    </div>
  </div>
</ANS>
<!-- animate.css ===> fadeInDown 切换效果： -->
<ANS>
  <div v-show="fadeDUToggle" ans-show="fadeInDown" ans-hide="fadeOutUp">
    <div class="inner fadeDU"></div>
  </div>
</ANS>
<!-- jquery.js ===> fadeIn 切换效果： -->
<ANS>
  <div v-show="fadeToggle" ans-show="fadeIn" ans-hide="fadeOut">
    <div class="inner fade"></div>
  </div>
</ANS>
```

组合式动画效果：

```vue
<div class="fadeTo">
  <div>
    <ANS>
      <div v-show="fadeTo" ans-show="fadeInTopLeft" ans-hide="fadeOutTopLeft">
      </div>
    </ANS>
    <ANS>
      <div v-show="fadeTo" ans-show="fadeInTopRight" ans-hide="fadeOutTopRight">
      </div>
    </ANS>
  </div>
  <div>
    <ANS>
      <div v-show="fadeTo" ans-show="fadeInBottomLeft" ans-hide="fadeOutBottomLeft">
      </div>
    </ANS>
    <ANS>
      <div v-show="fadeTo" ans-show="fadeInBottomRight" ans-hide="fadeOutBottomRight">
      </div>
    </ANS>
  </div>
</div>
<style  lang="less" scoped>
  .fadeTo {
    margin: 50px auto;
    width: 520px;
    &>div {
      height: 230px;
      display: flex;
      justify-content: space-around;
      &>div {
        flex: 1;
        margin: 5px;
        background: #27a9e3;
      }
    }
  }
</style>

```



##### 踩坑！！！

`<ANS>`为函数式组件基于vue内置组件`<Transition>`组件自带钩子函数方法开发，所以动画执行内部原理一样，这样就需要避免外部污染。如： 动画执行结束节点会绑定 class="v-leave-to" 类名。切勿为相关类名设置全局样式。如：opacity, visibility等。

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