-webkit-transition работает нормально в HTML4 переходный, но не в HTML5? - PullRequest
Новая
       1

-webkit-transition работает нормально в HTML4 переходный, но не в HTML5?

4 голосов
/ 19 января 2011

Я запускаю свое приложение в Google Chrome и Safari, оба совместимы с webkit. Я создаю прокрутку div с помощью -webkit-transition.

Это работало очень хорошо, когда я указывал тип документа как переходный HTML 4 (! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.0 Transitional // EN"), но наше требование - HTML 5. doctype (! DOCTYPE HTML) переход перестает работать полностью.

Я пропустил свой код через средство проверки HTML5 и удалил все ошибки (кроме тегов).

Я что-то неправильно понимаю?

Вот соответствующий код: 

<!DOCTYPE HTML>

<html>
<head>
    <title>Shopping List</title>
    <style>
        ul{margin:0;padding:0;}
        li{display: inline; float: left;}


        body{
            background-color:   #475c76;
            font-family:        Arial;
            font-size:          18pt;
            font-weight:        bold;
        }

        #wrapper{
            height:             600px;
            width:              800px;
        }

/* Main menu */

        #mainMenu{
            height:             83px;
            background-image:   url(img/mainMenu_bg.png);
        }
        #mainMenu li{
            height:             57px;
            margin:             13px 0;
            display:            inline;
            float:              left;
            color:              #475c76;
        }
        #mainMenu li a{
            color:              #475c76;
            padding:            0;
            text-decoration:    none;
            background-image:   url(img/btn_main.png);
            background-position:0 0;
            height:             57px;
            width:              197px;
            text-align:         center;
            line-height:        40pt;
            display:            inline-block;
        }
        #mainMenu li a:link{
        }
        #mainMenu li a:active{
            background-position:    0 -57px;
            color:                  white;
        }

/* Page body */     

        #pagebody{
            overflow:           hidden;
            height:             417px;
            background-color:   #DDDDDD;
        }

/*  Submenu */

        .subMenuWrapper{
            height:             80px;
            width:              800px;
            overflow:           hidden;
            position:           absolute;
            top:                421px;
            left:               0;
        }

        #subMenus{
            position:           absolute;
            background-image:   url(img/subMenu_bg.png);
            height:             80px;
            width:              1600px;
                -webkit-transition: all .4s;
        }
        #subMenus ul{
            width:              780px;
            padding:            0 10px;
            display:            inline;
            float:              left;
        }

        #subMenus ul .floatright{
            float:              right;
        }

/* Buttons */       

        a.button{
            color:              white;
            text-decoration:    none;
            background-position:center 0;
            text-align:         center;
            display:            inline-block;
        }

        a.button>*{
            display:            inline-block;
            margin-top:         10px;
            height:             60px;
            background-image:   url(img/button1.png);
            line-height:        40pt;
        }

        a.button .l{
            width:              14px;
            background-position:top left;
        }
        a.button .t{
            background-position:top center;
            color:              #AABBCC;
            padding:            0 10px;
        }
        a.button .r{
            width:              14px;
            background-position: top right;
        }
        a.button .larrow{
            width:              24px;
            background-image:   url(img/buttonpointies.png);
            background-position:top left;
        }
        a.button .rarrow{
            width:              24px;
            background-image:   url(img/buttonpointies.png);
            background-position: top right;
        }

        a:active.button .t{
            background-position: center -60px;
            color:              white;
        }
        a:active.button .l,
        a:active.button .larrow{
            background-position: left -60px;
        }
        a:active.button .r,
        a:active.button .rarrow{
            background-position: right -60px;
        }

/* List */

        #scrollingWrapper{
            overflow:   hidden;
        }
        #scrollingWrapper>div{
            display:inline;
            float:left;
        }

        #scrollingList{
            position:           relative;
            width:              660px;
            -webkit-transition: all .5s;
        }

        .lineItem{
            height:             60px;
            width:              100%;
            border-top:         3px solid white;
            border-bottom:      3px solid gray;
            font-size:          24pt;
            padding:            3px 8px;
            background-color:   #E8E8E8;
        }
        .lineItem *{
            height:             57px;
            display:            inline;
            float:              left;
        }
        .lineItem .text{
            margin:             7px 14px;
        }
        .lineItem .checkbox{
            background-image:   url(img/btn_check.png);
            width:              44px;
            margin:0;
        }

/* Scroll buttons */

        .scrollArea .scrollBar{
            display:            inline;
            float:              left;
            background-color:   #D0D0D0;
            height:             334px;
            width:              5px;
            margin:             2px 0 2px 28px;
            padding:            0;
            border-radius:      3px;
        }
        .scrollArea .scrollBar #elevator{
            position:           relative;
            background-color:   gray;
            height:             100px;
            width:              5px;
            -webkit-transition: all .5s;
            border-radius:      3px;
        }

        .scrollArea .scrollButtons{
            display:inline;
            float:left;
            margin-left:    12px;
            margin-top:     100px;
        }
        .scrollArea .scrollButtons li{
            display:            block;
            float:              none;
            padding:            4px 0;
        }
        .scrollArea .scrollButtons li div{
            margin:0;
            display:            inline;
            float:              left;
        }
        .scrollArea .scrollButtons li div img{
            padding-top:        10px;
        }

/* Footer */

        #footer{
            position:           absolute;
            top:                500px;
            height:             100px;
            width:              800px;
            border-top:         3px solid black;
        }
        #footer img{
            margin:             5px;
            float:left;
        }
        #footer #datetime{
            margin-top:         20px;
        }
        #footer #datetime *{
            float:              right;
            color:              #AABBCC;
            text-align:         center;
            color:              #AABBCC;
            display:            block;
            width:              160px;
        }
    </style>
    <script>
        var arrList =           ["Milk 1%", "Bread", "Granny Smith Apples", "Oatmeal","Potatoes", "Yogurt", "Muffins", "Spaghetti", "Crackers", "Pancake Mix", "Melons", "Ice Cream", "Perogies", "Cottage Cheese", "Canned Peaches","Red Delicious Apples", "Ground Beef", "Salmon Steaks", "Popcorn", "Salt", "Tea", "Coffee", "Light Bulbs", "Eggs", "Bacon"];
        var lineHeight =        72;
        var windowHeight =      338;
        var scrollBarHeight =   335;
        var scrollAmt =         lineHeight*4;
        var listHeight;         //tbd
        var elevHeight;         //tbd


        function init(){
            popList();
            // upon finished loading
            listHeight = (arrList.length)*lineHeight;
            document.getElementById('scrollingList').style.top = 0;//needs to be explictly set so that it can be read later, otherwise it is undefined

            elevHeight = windowHeight/listHeight*scrollBarHeight;
            document.getElementById('elevator').style.height = elevHeight;
            document.getElementById('elevator').style.top = 0;
        }

        function popList(){

            // populate list from arrList
            // THIS CODE IS RUN INLINE
            var listHTML = "";
            for (item=0;item<arrList.length;item++){
                listHTML += '<div id="lineitem'+ item +'" class="lineItem" checked="false">';
                listHTML += '   <a href="javascript:void(false);" id="check'+ item +'" class="checkbox" onmousedown="check(this, true)" onmouseup="check(this, false)"></a>';
                listHTML += '   <div class="text">' + arrList[item] + '</div>';
                listHTML += '</div>';
            }
            document.getElementById('scrollingList').innerHTML = listHTML;
        }

        function scrollme(dir){
            var yMax = windowHeight-listHeight;
            var yMin = 0;

            if (dir>0){ // scroll down (list physically moves up, listPos goes more negative)
                _setlistPos(Math.max(_getlistPos() - scrollAmt, yMax));
            }
            else{       // scroll up (list physically moves down, listPos goes more positive)
                _setlistPos(Math.min(_getlistPos() + scrollAmt, yMin));
            }
            _setscrollPos();

            function _getlistPos(){     return parseInt(document.getElementById('scrollingList').style.top); }
            function _setlistPos(y){    document.getElementById('scrollingList').style.top = y; }
            function _setscrollPos(){   document.getElementById('elevator').style.top = -(_getlistPos())*scrollBarHeight/listHeight; }
        }

        function editList(editState){
            if (editState){ // show 2ndary menu
                document.getElementById('subMenus').style.left = -800;
            }
                else{ // return to primary menu
                document.getElementById('subMenus').style.left = 0;
            }
        }

        function check(button,clickState){
            var lineitem = button.parentNode;
            if(clickState){ // button pressed
                button.style.backgroundPosition = "0 -57px";
            }
            else{ // button released
                if (lineitem.getAttribute("checked")=="false"){ // box was unchecked, so check it
                    lineitem.setAttribute("checked","true");
                    button.style.backgroundPosition = "0 -114px";
                }
                else{ // box was checked, so uncheck it
                    lineitem.setAttribute("checked","false");
                    button.style.backgroundPosition = "0 0";
                }
            }
        }

        function deleteChecked(){
            var tempArrList = [];
            for (item=0;item<arrList.length;item++){
                var lineitem = document.getElementById("lineitem" + item);
                if (lineitem.getAttribute("checked")!="true"){
                    tempArrList.push(lineitem.childNodes[3].innerText);
                }
            }
            arrList = tempArrList;
            init();
        }

    </script>
</head>

<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0" onload="init()">
<div id="wrapper">
    <!-- Main Menu -->
    <ul id="mainMenu">
        <li><a href="">Home</a></li>
        <li><a href="">Shopping List</a></li>
        <li><a href="">Recipes</a></li>
        <li><a href="">Specials</a></li>
    </ul>
    <!-- Page body -->
    <div id="pagebody">
        <div id="scrollingWrapper">
            <!-- Scroll list -->
            <div id="scrollingList">
            </div>
            <!-- Scroll Controls -->
            <div class="scrollArea">
                <div class="scrollBar"><div id="elevator"></div></div>
                <ul class="scrollButtons">
                    <li>
                        <a class="button" href="javascript:void(false);" onmouseup="scrollme(-1);">
                            <div class="l">&nbsp;</div><div class="t"><img src="img/glyph_up.png" width="35" height="35" alt=""></div><div class="r">&nbsp;</div>
                        </a>
                    </li>
                    <li>
                        <a class="button" href="javascript:void(false);" onmouseup="scrollme(1);">
                            <div class="l">&nbsp;</div><div class="t"><img src="img/glyph_dn.png" width="35" height="35" alt=""></div><div class="r">&nbsp;</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- SubMenus -->
        <div class="subMenuWrapper">
            <div id="subMenus">
                <ul  id="subMenu1">
                    <li>                    
                        <a class="button" href="javascript:void(false);">
                            <div class="l">&nbsp;</div><div class="t">Button 1</div><div class="r">&nbsp;</div>
                        </a>
                    </li>
                    <li class="floatright"> 
                        <a class="button" href="javascript:void(false);" onmouseup="editList(true);">
                            <div class="l">&nbsp;</div><div class="t">Edit List</div><div class="rarrow">&nbsp;</div>
                        </a>
                    </li>
                </ul>
                <ul  id="subMenu2" class="subMenu">
                    <li>                    
                        <a class="button" href="javascript:void(false);" onmouseup="editList(false);">
                            <div class="larrow">&nbsp;</div><div class="t">Done</div><div class="r">&nbsp;</div>
                        </a>
                    </li>
                    <li class="floatright"> 
                        <a class="button" href="javascript:void(false);" onmouseup="deleteChecked()">
                            <div class="l">&nbsp;</div><div class="t">Clear Checked</div><div class="r">&nbsp;</div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Footer -->
    <div id="footer">
        <img src="img/main_ad_wave.png" alt="">
        <div id="datetime">
            <span id="date">Fri. Jan. 01</span>
            <span id="time">12:01am</span>
        </div>
    </div>

</div>

</body>
</html>

Ответы [ 2 ]

4 голосов
/ 26 января 2011

Похоже, проблема не в переходе, а в настройке свойств. 

elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;

Свойство CSS height принимает length не целое число, а длинам (кроме 0) требуются единицы.

(Могут быть и другие проблемы, возможно, похожие, но это первая проблема, которую я обнаружил в вашем коде)

Используемый вами Doctype (HTML 4.01 Transitional без URL-адреса) рассматривается браузером как признак устаревшего кода, написанного до того, как правильное (или почти правильное) использование веб-стандартов стало обычным явлением (т.е. примерно в конце 90-х годов). Это вызывает режим Quirks.

HTML 5 Doctype разработан для запуска режима стандартов, в котором браузеры следуют стандартам намного лучше (и гораздо более согласованы друг с другом - это очень желательно).

Одной из ошибок, эмулируемых в режиме Quirks, является обработка целочисленных значений как длины в пикселях.

Вам необходимо указать единицу. например ... + 'px'.

(У вас также есть некоторые ошибки в HTML, которые могут быть обнаружены валидатором )

0 голосов
/ 26 января 2011

Я подозреваю, что проблема заключается в том, что похоже, что вы пытаетесь инициировать переход, изменяя свойства CSS программно с помощью Javascript.Я не совсем уверен, насколько хорошо эта функциональность поддерживается сейчас или насколько хорошо она будет поддерживаться в будущем.

Действительно, переходы CSS предназначены для улучшения пользовательского интерфейса, а не для такого рода.продвинутая анимация.Кажется, вы пытаетесь согнуть CSS, чтобы он делал то, для чего он не предназначен.Возможно, вы захотите пересмотреть свой подход.

Может быть возможно достичь того, чего вы хотите, используя ключевые кадры анимации CSS, иначе почему бы просто не использовать библиотеку Javascript, такую ​​как jQuery, для выполнения тяжелой работы?Такой подход гораздо лучше подходит для того, чего вы пытаетесь достичь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...