transition不支持display属性
transition不支持display属性,解决:
1.opacity和visibility,但页面会有留白
.div2 { width: 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 { width: 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>