Vue + Velocity.js 实现动画效果

Vue过渡动画基础知识参阅：https://cn.vuejs.org/v2/guide/transitions.html

1、在模板 index.html 中引入 velocity.js。

2、以慧企星助平台的计划页面 提示信息为例：

(1)、DOM结构如下

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<transition v-on:leave="hideTipAfter">                     <div class="tip_info_row" v-if="isShowTip" >                         <div>                             优先级                             <span style="color: #999999;">(优先级越高越紧急)：</span>                             <template v-for="(item,index) in level">                                 <span class="color_cirlce" :style="{'backgroundColor':item}"></span>                                 <span :style="{color: item}">优先级{{index+1}}</span>                             </template>                         </div>                         <i class="iconfont icon-guanbi close_btn" @click="changeShowTip"></i>                     </div>                 </transition>                                              <div                     element="div"                     v-model="mDataList"                     v-if="mDataList&&mDataList.length>0"                     :class="['draggable_class']"                     id="planTaskList"                 ></div>

 

（2）、在 methods 中增加如下方法

1 2 3 4 5

hideTipAfter:function (el, done){             Velocity(el, { opacity: 0 }, { duration: 500 })//本身隐藏             var el1=document.getElementById('planTaskList');             Velocity(el1, { top: 10 }, { duration: 500 })  //下面的兄弟元素上移         }

 

 

 3、更多 velocity 知识请参阅 https://www.cnblogs.com/guandekuan/p/6643988.html 或者 http://velocityjs.org/