vue中使用原始transition时注意事项

注意在使用原生transition时不要用v-if，用样式控制为佳，否则使用vue封装动画组件transition即可；

1、页面

<div :class="['depart_tree', {'active': expandFlag} ]" >
    <div :class="['tree_list']" >
         <Tree ref="company_tree" :data="deptList" @on-select-change="getDepart" :render="renderTreeIcon" ></Tree>
     </div>
</div>
<div class="depart_open">
    <Icon :type="expandFlag?'ios-arrow-dropleft':'ios-arrow-dropright'" size="18" class="expand_flag" @click="open"/>
</div>

2、样式

.depart_tree{
   width: 200px;
   height: 83vh;
   overflow: hidden;
   overflow-y: auto;
   -webkit-transition: all 0.5s;/*兼容谷歌和苹果*/
   -moz-transition: all 0.5s;/*兼容火狐*/
   -ms-transition: all 0.5s;
   -o-transition: all 0.5s;/*兼容欧鹏*/
   transition: all 0.5s; /*兼容w3c浏览器*/
   &.active{
       width: 0px;
   }
}