0

Web 開発は初めてで、CSS の高さ遷移を使用せずに div を垂直に開く方法があるかどうかを知りたいです。また、メインの div が表示される前に表示されるため、不透明度の遷移をテキスト付きの div に追加する必要がありました。ここにデモがありますhttp://jsfiddle.net/wq7v7/

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/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>
4

1 に答える 1

0

使えばjQuery簡単です。そして、将来的にはアニメーションを使用しないでくださいbody。内部divに使用します。ここにフィドルがあります

于 2013-11-01T22:18:02.113 に答える