vue的transition组件学习以及为何与display搭配能起到过渡效果的个人理解

[lizhongzhen11]

起因

  昨天项目中用到了下拉列表功能，我抄的iview的，功能没问题，就是这个过渡效果令我很奇怪，明明大部分代码都是抄的，怎么iview那么动感，我这里这么生硬。我注意到iview的Dropdown组件是通过v-show来控制的，根据vue官方文档单元素/组件的过渡说明，这里也没有问题啊。

  但是我还是留了心眼，v-show明明改变的是display属性，我记得css里面transition属性是不支持display的，怎么这里就有效果呢？

  我不放心的去MDN查了下，我的记忆是对的，transition的确不支持display属性。具体可见可动画属性列表

  那它到底用了什么骚操作呢？谷歌浏览器控制台也没看出什么啊？记得以前用iview开发时就有这个困惑，这个困惑必须得解开，不然心里不踏实！

水。。。

  我双12一天都在研究transition组件代码，从刚开始一脸懵逼到渐渐找到门路，只是由于之前只看过vue核心双向绑定那块的代码，什么VNode之类的几乎没看，以前是真的菜，看不懂，今天强行看了一波，勉强看懂30%，实在不行只好去百度查vue源码解析相关，就在此时，我突然想起来很久很久以前，我，好像，曾经，给好几个，分析vue源码的库，点过star。。。
  这是病，明明点过很多star，却都不怎么看！当我找到那些库时，有两个极为牛逼，我自愧不如，其中一个就有transition组件等的讲解，看完我能明白7成吧。这时，我知道，我不该开这个issue的，自己都不完全懂就敢狂妄的写这个标题，实在班门弄斧！！！
以下是那两个极为牛逼的vue源码分析：

• http://hcysun.me/vue-design 来自前美团员工
• https://ustbhuangyi.github.io/vue-analysis 来自滴滴员工

  想看transition分析的可以看滴滴员工的那个链接，但是强烈建议全都从头看一遍，真的学到很多！

个人探索

这里的探索主要依赖于自己copy iview的Dropdow组件源码以及看完滴滴员工的vue源码分析所得。

主要看这里：https://ustbhuangyi.github.io/vue-analysis/extend/tansition.html#%E6%80%BB%E7%BB%93 ，最后一句话：
所以真正执行动画的是我们写的 CSS 或者是 JavaScript 钩子函数，而 Vue 的 只是帮我们很好地管理了这些 CSS 的添加/删除，以及钩子函数的执行时机。

也就是说，我以前非常错误的认为这些动态过渡效果是vue提供的，极度错误的，真丢脸啊，无地自容！！！

那么，iview这么炫酷的动态怎么做的呢？
其实靠的还是css动画以及scaleY和transform-origin属性！！！
iview dropdown动态效果部分css源码：https://github.com/iview/iview/blob/2.0/src/styles/animation/slide.less#L12

反省

我太菜了。。。