display和transition过渡冲突 元素移动显现消失的解决方案

display:none的时候，页面文档流中将不会存在该元素。transition无法对一个从有到无的元素产生过渡效果（v-show v-if同样冲突）

解决方案

1.用visibility：hidden;代替display:none; 用visibility:visible;代替display:block;

visibility不可见但仍然占位置

2.display属性不支持过渡，那么我们可以让其他可见的属性过渡，并使用定时器分开执行(先display block 过0.x秒再执行其他元素过渡)，看起来就像display过渡了一样。

3.对元素的height/width进行设定，从0到元素本身的高度的一个过度。上下/左右的显现/消失+top/left位移+height/width+transition是一个比较好的解决办法。height的过渡0-100vh是从上往下显现    100vh-0是从下往上消失 width的过渡0-100vw是从左向右显现    100vw-0是从右向左消失 

4.transform: translate();向上或向左位移不会增加位置 元素会消失 但仍然占据原位置影响其他元素布局 设置绝对定位可解决  向右或向下超过100vw/100vh 位移会增加页面长宽