css过渡高度不影响文本

Question

我已经将高度过渡应用到了一个框，但它只影响边框而不影响其中的文本。我希望文本随框慢慢缩小，如何实现缓慢过渡以隐藏文本？

代码：

<div class="test">
this is my test
</div>

的CSS：

.test {
    transition: height 2s, ease-in;
    height: 400px;
    width: 600px;
    border: 1px solid red;
}

    .test:hover{
        height: 1px;
    }

jsfiddle

Answer 1

添加overflow：hidden;

.test {
    transition: height 2s, ease-in;
    height: 400px;
    width: 600px;
    border: 1px solid red;
    overflow: hidden;
}