-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.
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.
I ran my code through an HTML5 validator and cleaned up all errors (except tags).
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">';
开发者_StackOverflow中文版 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>
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.
(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.
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).
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)
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.
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.
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.
加载中,请稍侯......
精彩评论