css - 如果窗口具有特定宽度，则为动画高度

我有一个问题。如果窗口宽度小于1000px，我想给一个元素一个slideUp动画。所以我认为我可以通过媒体查询来处理这个问题，以检查窗口是否小于1000px。如果是这样，它应该将高度设置为0。我做错了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animate the height if less than 1000px</title>
</head>
<body>
<style>
div{
    width:100%;
    height:500px;
    background:red;
    transition:height 2s;
    -webkit-transition:height 2s;
}
@media only screen and (max-width:1000px){
    div{
        height:0;   
    }
}
</style>
<div>
    Hello
</div>
</body>
</html>

如果窗口具有特定宽度，则为动画高度

0 个答案: