-webkit-transition在HTML4过渡模式下工作正常，但在HTML5模式下工作不正常？
-webkit-transition在HTML4过渡模式下工作正常，但在HTML5模式下工作不正常？
提问于 2011-01-20 01:46:42
我在google Chrome和Safari上运行我的应用程序，这两个浏览器都兼容webkit。我正在使用-webkit-transition构建一个滚动div。
当我将文档类型指定为HTML 4过渡(!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0过渡//EN“)时，它工作得很好，但我们的要求是HTML 5。当我设置文档类型(!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"> </div><div class="t"><img src="img/glyph_up.png" width="35" height="35" alt=""></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" width="35" height="35" alt=""></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" alt="">
<div id="datetime">
<span id="date">Fri. Jan. 01</span>
<span id="time">12:01am</span>
</div>
</div>
</div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2011-01-27 00:52:54
看起来问题不在于转换，而在于属性的设置。
elevHeight = windowHeight/listHeight*scrollBarHeight;
document.getElementById('elevator').style.height = elevHeight;CSS height属性接受的长度不是整数，长度(除0以外)需要单位。
(可能还有其他问题，可能是类似的问题，但这是我在代码中发现的第一个问题)
您正在使用的Doctype (HTML 4.01过渡版，没有URL)被浏览器认为是在正确(或几乎正确)使用web标准变得普遍(即90年代末左右)之前编写的遗留代码的指示。这会触发Quirks模式。
HTML5 Doctype被设计为触发标准模式，在这种模式下，浏览器更好地遵循标准(并且彼此之间更加一致-这是非常理想的)。
在Quirks模式中模拟的错误之一是将整数值视为像素长度。
您需要指定一个单位。例如... + 'px'。
(在validator可以检测到的超文本标记语言中也有一些错误)
Stack Overflow用户
发布于 2011-01-27 00:43:56
我怀疑这个问题是因为看起来你试图通过使用Javascript以编程方式改变CSS属性来触发转换。我不完全确定现在对这类功能的支持有多好，也不知道将来会有多好。
实际上，CSS过渡旨在增强UI体验，而不是为了这种高级动画。看起来你是在试图改变CSS，让它做一些不是它设计的东西。您可能需要重新考虑您的方法。
使用CSS动画关键帧可以实现你想要的效果，否则为什么不使用jQuery这样的Javascript库来完成繁重的工作呢？这种方法将更适合您正在尝试实现的目标。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4738745
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号