Im новый для веб-разработки и хотел бы знать, есть ли способ сделать div открытым вертикально без использования переходов высоты css. Мне также пришлось добавить переход непрозрачности в div с текстом с момента его показа до появления главного div. Вот демонстрация http://jsfiddle.net/wq7v7/
<script type="text/javascript" src="/jquery.min.js">
</script>
<script>
window.onload = function(){
document.getElementById("body").setAttribute("class","loaded");
}
</script>
<style type="text/css">
.fadein {
height: 0px;
transition: height 0.7s;
-moz-transition: height 0.7s;
-webkit-transition: height 0.7s;
-o-transition: height 0.7s;
background-color: #39F;
width: 600px;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000;
border-bottom-color: #000;
}
#body.loaded .fadein {
height: 200px;
opacity: 1;
}
.thebox {
opacity: 0;
transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#body.loaded .thebox {
opacity: 1;
}
</style>
</head>
<body id="body">
<div class="fadein">
<div class="thebox" style="text-align:center; color:#000; font-size:24px; font-family:'Myriad Pro'; margin-top:10px;">
Choose your city
</div>
</div>
</body>
</html>
Если вы используете jQuery
это просто. И в будущем не используйте анимацию на body
. Используйте его для внутреннего div. Вот скрипка