【Vue2】transition 标签的使用

1、需要动画的元素使用<transition></transition>标签包裹 

2、如果 transition 组件没有 name 属性值，默认类名的前缀是 v-，如 v-enter、v-leave；如果有 name 属性，假设值为 sort ，那么过渡的类名就会变为 sort-enter、sort-leave 这样表示

3、下面是一组案例：

<transition name="sort">
 <ul class="userChange" v-show="isShow">
  <li>
   <el-button icon="el-icon-refresh">切换账号</el-button>
  </li>
  <li>
   <el-button icon="el-icon-edit">修改密码</el-button>
  </li>
  <li>
   <el-button icon="el-icon-switch-button">退出登录</el-button>
  </li>
 </ul>
</transition>

.sort-enter,
.sort-leave-to {
  height: 0px;
  opacity: 0;
}

.sort-enter-active,
.sort-leave-active {
  transition: all .5s;
}

.sort-enter-to,
.sort-leave {
  height: 195px;
  opacity: 1;
}

 

4、注释：

1. v-enter：进入(显示)开始时的状态
2. v-enter-active：进入(显示)过程中的状态
3. v-enter-to：进入(显示)结束时的状态
4. v-leave：离开(隐藏)开始时的状态
5. v-leave-active：离开(隐藏)过程中的状态
6. v-leave-to：离开(隐藏)结束时的状态