-webkit-transition 在 HTML4 过渡中可以正常工作，但在 HTML5 中不行？答案

【问题标题】：-webkit-transition works OK in HTML4 transitional but not in HTML5?-webkit-transition 在 HTML4 过渡中可以正常工作，但在 HTML5 中不行？
【发布时间】：2011-06-11 22:40:07
【问题描述】：

我在 google Chrome 和 Safari 上运行我的应用程序，两者都兼容 webkit。我正在使用-webkit-transition 构建一个滚动div。

当我将文档类型指定为 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>

【问题讨论】：

我需要查看整个页面，因为您提供的内容不起作用。您是否也尝试过只是过渡：所有 .5s 缓入出局； ?
我不知道如何回复这个问题，所以我只能添加评论（少于 600 个字符）...相反，我编辑了原始帖子以包含整个代码。
顺便说一句，我尝试了一些 doctype 的组合，基于我读过的变体，结果好坏参半：我不知道#2 是否有效，因为它正在降级到 HTML4，或者它是否真的在 HTML5 中有效。
我在ths-cls.provanix.com 上使用-webkit-transition: opacity 1s linear;，使用HTML5 文档类型没有问题。（时钟会淡入。）
这很有趣。有道理，也许不是 CSS3 问题

标签： html webkit css

【解决方案1】：

看起来问题不在于过渡，而在于属性的设置。

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

CSS 高度属性采用 length 而不是整数，长度（0 以外）需要单位。

（可能还有其他问题，可能类似，但这是我在您的代码中发现的第一个问题）

您使用的 Doctype（没有 URL 的 HTML 4.01 过渡）被浏览器认为是在正确（或几乎正确）使用网络标准变得普遍之前（即大约 90 年代后期）编写的遗留代码的指示。这会触发 Quirks 模式。

HTML 5 Doctype 旨在触发标准模式，在这种模式下，浏览器会更好地遵循标准（并且彼此之间更加一致——这是非常可取的）。

Quirks 模式中模拟的错误之一是将整数值视为像素长度。

您需要指定一个单位。例如... + 'px'.

（您的 HTML 中还有一些错误会被 validator 检测到）

【讨论】：

【解决方案2】：

我怀疑问题出在这样一个事实，即您似乎试图通过使用 Javascript 以编程方式更改 CSS 属性来触发转换。我不完全确定现在对这种功能的支持情况如何，或者将来对这种功能的支持情况如何。

确实，CSS 过渡旨在增强 UI 体验，而不是用于这种高级动画。似乎您正在尝试弯曲 CSS 以使其完成并非设计用于的事情。您可能需要重新考虑您的方法。

使用 CSS 动画关键帧也许可以实现您想要的，否则为什么不使用 jQuery 之类的 Javascript 库来完成繁重的工作呢？这种方法会更适合您想要实现的目标。

【讨论】：