为什么这里的transition对overflow：hidden过渡到visible无效？

Question

HTML

<nav>
<ul class="ul1">
<li>
    <a href="">首页</a>
    <ul class="ul2">
        <li><a href="">新闻</a></li>
        <li><a href="">科技</a></li>
        <li><a href="">财经</a></li>
        <li><a href="">读书</a></li>
    </ul>
</li>
</ul>
</nav>

CSS

.ul1{transition: all 1s ease;}
ul{list-style: none;}
a{text-decoration: none;}
.ul1>li{

width: 200px;
height:2em;
background: rgba(30,50,200,0.7);
line-height: 2em;
list-style: none;
text-align: center;
overflow: hidden;}

.ul1>li:hover{

overflow: visible;}

.ul2{

background: rgba(30,50,200,0.4);}

.ul2>li:hover{

background: rgba(200,0,20,1);
width: 100%;
height: 2em;
line-height: 2em;
display: block;}

Answer 1

就是说属性之中可以animation的，没有overflow，因此不能用伪类做overflow的过度

Answer 2

overflow 不在css可以animate/transition的属性列表里
css可以animate/transition的属性列表

Answer 3

简单来说就是过渡和动画效果是要插值计算的。只有能被计算的数值类型属性才能用。