-webkit-transition 在 HTML4 过渡中可以正常工作，但在 HTML5 中不行？
Posted
技术标签:
【中文标题】-webkit-transition 在 HTML4 过渡中可以正常工作，但在 HTML5 中不行？【英文标题】：-webkit-transition works OK in HTML4 transitional but not in 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>
ulmargin:0;padding:0;
lidisplay: 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" margin margin 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"> </div><div class="t"><img src="img/glyph_up.png" ></div><div class="r"> </div>
</a>
</li>
<li>
<a class="button" href="javascript:void(false);" onmouseup="scrollme(1);">
<div class="l"> </div><div class="t"><img src="img/glyph_dn.png" ></div><div class="r"> </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"> </div><div class="t">Button 1</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="editList(true);">
<div class="l"> </div><div class="t">Edit List</div><div class="rarrow"> </div>
</a>
</li>
</ul>
<ul id="subMenu2" class="subMenu">
<li>
<a class="button" href="javascript:void(false);" onmouseup="editList(false);">
<div class="larrow"> </div><div class="t">Done</div><div class="r"> </div>
</a>
</li>
<li class="floatright">
<a class="button" href="javascript:void(false);" onmouseup="deleteChecked()">
<div class="l"> </div><div class="t">Clear Checked</div><div class="r"> </div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Footer -->
<div id="footer">
<img src="img/main_ad_wave.png" >
<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 问题
【参考方案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 库来完成繁重的工作呢？这种方法会更适合您想要实现的目标。
【讨论】：
以上是关于-webkit-transition 在 HTML4 过渡中可以正常工作，但在 HTML5 中不行？的主要内容，如果未能解决你的问题，请参考以下文章
Dojo HTML 模板：在 HTML 模板中重复一段 HTML
在文本编辑器中输入html代码后如何在浏览器中执行html代码呢？？