CSS3 анимация непрозрачности не работает с «переполнением: скрыто» - PullRequest
Новая
       28

CSS3 анимация непрозрачности не работает с «переполнением: скрыто»

1 голос
/ 15 декабря 2011

У меня есть Scenrio, где мне нужно сделать Fade-In Animation на DIV, которая не работает должным образом. После долгих экспериментов я обнаружил, что один из элементов div получил «overflow: hidden» в примененном к нему классе css. Если я прокомментирую часть «переполнение: скрыто», анимация, кажется, работает отлично. Хотя это решило мою проблему, тем не менее, вопрос остается в моей памяти, не работает ли «overflow: hidden» с анимацией непрозрачности. Для вашего ознакомления, вот код.

Мой браузер Chrome 15.0.XXX.X Моя ОС Windows XP 

<!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>

1 Ответ

2 голосов
/ 15 декабря 2011

@<br> -webkit-keyframes fadeIn {

изменить на: 

@-webkit-keyframes fadeIn {

@ нужно в той же строке

http://jsfiddle.net/wX8DW/

Переполнение: скрыто невлияет на результат

...