-webkit-transition在HTML4轉型過程中可以正常工作,但在HTML5中沒有?

[英]-webkit-transition works OK in HTML4 transitional but not in HTML5?


I am running my app on google Chrome and Safari, both webkit-compliant. I'm building a scrolling div using -webkit-transition.

我在谷歌Chrome和Safari上運行我的應用,這兩款應用都兼容webkit。我正在使用-webkit-transition構建一個滾動div。

It worked just fine when I had the doctype specified as HTML 4 transitional (!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"), but our requirement is HTML 5. When I set the doctype (!DOCTYPE HTML) the transition stops working completely.

當我將doctype指定為HTML 4 transitional (!DOCTYPE HTML PUBLIC“-/ W3C/ DTD HTML 4.0 Transitional//EN”,但我們的需求是HTML 5。當我設置doctype (!轉換完全停止工作。

I ran my code through an HTML5 validator and cleaned up all errors (except tags).

我通過一個HTML5驗證器運行我的代碼,並清除了所有的錯誤(標簽除外)。

Am I misunderstanding something?

我誤解什么?

Here is the relevant code:

以下是相關代碼:

<!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 个解决方案

#1


4  

It looks like the problem isn't the transition, but the setting of properties.

看起來問題不在於過渡,而在於屬性的設置。

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

The CSS height property takes a length not an integer, and lengths (other than 0) require units.

CSS height屬性的長度不是整數,長度(0以外)需要單位。

(There may be other issues, probably similar ones, but that's the first one I spotted in your code)

(可能還有其他問題,可能是類似的問題,但這是我在您的代碼中發現的第一個問題)

The Doctype you are using (HTML 4.01 Transitional with no URL) is considered by browser to be an indication of legacy code written before the proper (or almost proper) use of web standards became common (i.e. around the late 90s). This triggers Quirks mode.

瀏覽器認為您正在使用的Doctype(沒有URL的HTML 4.01轉換)是在web標准的正確(或幾乎正確)使用變得普遍(即大約在90年代后期)之前編寫的遺留代碼的指示。這觸發怪異模式。

The HTML 5 Doctype is designed to trigger Standards mode, in which browsers follow the standards much better (and are much more consistent which each other — this is highly desirable).

HTML 5 Doctype的設計目的是觸發標准模式,在這種模式下,瀏覽器會更好地遵循標准(而且它們之間的一致性也更強——這是非常可取的)。

One of the bugs that is emulated in Quirks mode is treating integer values as pixel lengths.

在怪癖模式下被模仿的一個錯誤是把整數值當作像素長度來處理。

You need to specify a unit. e.g. ... + 'px'.

您需要指定一個單元。如……+“像素”。

(You also have some errors in the HTML that would be detected by a validator)

(在HTML中還存在一些由驗證器檢測到的錯誤)

#2


0  

I suspect the problem is down to the fact that it looks like you're trying to trigger the transition by changing CSS properties programatically with Javascript. I'm not entirely sure how well that kind of functionality is supported now, or how well it will be supported in the future.

我懷疑問題的症結在於,您似乎正試圖通過用Javascript編程更改CSS屬性來觸發轉換。我不完全確定現在支持這類功能的程度,也不確定將來支持這類功能的程度。

Really, CSS transitions are intended for enhancing the UI experience, not for this kind of advanced animation. Seems that you're trying to bend CSS to make it do stuff it's not designed for. You might want to reconsider your approach.

實際上,CSS轉換是為了增強UI體驗,而不是為了這種高級動畫。似乎你在試圖改變CSS,使它做一些它不是為它設計的事情。您可能需要重新考慮您的方法。

It might be possible to achieve what you want using CSS animation keyframes, else why not just use a Javascript library like jQuery to do the heavy-lifting? That approach would be much better suited to what you're trying to achieve.

使用CSS動畫關鍵幀可能實現您想要的效果,否則為什么不使用像jQuery這樣的Javascript庫來完成繁重的工作呢?這種方法更適合於你想要達到的目標。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/01/19/720c71c7ae8f0b3ff987610db6730e0d.html



html4與html5的區別 html5和html4的區別 html5與html4的區別 html5和html4的區別 HTML5 和 HTML4的區別 Html5 與 Html4 的區別 HTML5與HTML4的區別 html4 與 html5的區別 Html5與Html4的區別 HTML4與HTML5的區別
 
粤ICP备14056181号  © 2014-2021 ITdaan.com