vue项目中Transition组件的使用

使用场景

项目中UI画的图，如果使用组件库的组件，对原本的组件样式改动太大，所以自己写css样式，添加动效，就用到了Transition组件，完成一个折叠面板的收起展开的效果。

  .pack_up-enter-from,
  .pack_up-leave-to {
    height: 0;
  }
  .pack_up-enter-active,
  .pack_up-leave-active {
    transition: height 0.3s;
  }
  .pack_up-enter-to,
  .pack_up-leave-from {
    height: 97px;
  }

---

使用方法：给 <Transition> 组件传一个 name prop 来声明一个过渡效果名，这是基于原生CSS的过渡效果。

  <transition name="pack_up"></transition>

---

vue的官方文档中有一张图向我们展示了一个过渡效果的起始状态，如上图。完成对不同状态的class的样式编写之后，例如我在项目中命名的.pack_up-enter-from，就可以在当前页面中使用这个过渡效果了。