vue-ans-velocity v1.1.0

简介：

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

使用步骤：

1.安装

npm install vue-ans-velocity

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

import Ans from "vue-ans-velocity"

Vue.component("ANS", Ans);

3.使用案例：

<!-- 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>

组合式动画效果：

<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等。