transition不支持display属性

transition不支持display属性，解决：

1.opacity和visibility,但页面会有留白

.div2 {
   100px;
  height: 100px;
  background: blue;
  transition: all 2s;
  visibility: hidden;
  opacity: 0; 
}
.div1:hover .div2 {
  visibility: visible;
  opacity: 1
}

<div class="div1">
  <p>隐藏渐变效果, 但在页面上有留白</p>
  <div class="div2"></div>
</div>
<div>我是第二个盒子</div>

2.设置max-height

.div2 {
   100%;
  max-height: 0px;
  opacity: 0;
  transition: max-height 2s linear;
}

.div1:hover .div2 {
  opacity: 1;
  max-height: 300px;
  overflow: hidden;
}

<div class="div1">
  <p>通过设置max-height来进行过度</p>
  <div class="div2">内容</div>
</div>
<div>我是第二个盒子</div>