1

DIVでフェードインアニメーションを実行する必要があるAScenrioがありますが、これは期待どおりに機能していませんでした。多くの実験の結果、divの1つにcssクラスの「overflow：hidden」が適用されていることがわかりました。「overflow：hidden」の部分にコメントすると、アニメーションは完璧に機能しているようです。問題は解決しましたが、「overflow：hidden」が不透明度アニメーションで機能しないかどうかという質問が頭に残っています。あなたの熟読のために、ここにコードがあります。

マイブラウザChrome15.0.XXX.XマイOSWindowsXP

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#MainContainer {
    opacity: 1;
    position: absolute;
    height: 500px;
    top: 10px;
    width: 600px;
    left: 10px;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}

.focussedItem {
    position: absolute;
    left: 300px;
    top: 200px;
    width: 450px;
    height: 230px;
    margin: 0px 0px;
    opacity: 1;
}

.innerDiv {
    position: relative;
    width: 450px;
    height: 150px;
    left: 10px;
    top: 40px;
    overflow: hidden; /* This is where the Problem is */
}

.optionItem {
    position: absolute;
    vertical-align: middle;
    text-align: left;
    font-size: 35px;
    width: 450px;
    height: 50px;
    left: 25px;
}

@
-webkit-keyframes fadeIn { 
    0% {opacity: 0;}
    100%{opacity:1;}
}
</style>
<script type="text/javascript">
    document.onkeydown = KeyCheck;
    function KeyCheck(e) {
        console.log(e.keyCode);
        document.getElementById("MainContainer").style.webkitAnimationDuration = "2000ms";
        document.getElementById("MainContainer").style.webkitAnimationName = "fadeIn"
    }
</script>
</head>
<body>

    <div>press space to test</div>

    <div id="MainContainer" class="MainContainer">
        <div id="SubContainer" class="focussedItem"
            style="height: 290px; top: 250px;">
            <div id="OptionRing" class="innerDiv"
                style="height: 190px; top: 50px;">
                <div class="optionItem" style="top: -40px;">OPTION 1</div>
                <div class="optionItem" style="top: 10px;">OPTION 2</div>
                <div class="optionItem" style="top: 60px;">OPTION 3</div>
                <div class="optionItem" style="top: 110px;">OPTION 4</div>
                <div class="optionItem" style="top: 160px;">OPTION 5</div>
                <div class="optionItem" style="top: 210px;">OPTION 6</div>
            </div>
        </div>
    </div>

</body>
</html>
4

1 に答える 1

2

@
-webkit-keyframes fadeIn {

への変更 ：

@-webkit-keyframes fadeIn {

@同じ行に必要

http://jsfiddle.net/wX8DW/

オーバーフロー：非表示は結果に影響しません

于 2011-12-15T06:26:43.717 に答える