Ниже приведен короткий html-файл, который включает в себя все CSS и почти весь javascript для выполнения некоторых переходов (он использует jquery из cdn).Это маленькая песочница, с которой я играю, чтобы посмотреть, как все это работает.Я столкнулся с тем, что иногда переходы не происходят.Это, кажется, имеет место в FF4, Safari и Chrome.В FF4 тайм-аут, отправленный в setTimeout, должен быть> 10, иногда> 16, иначе он все равно не пройден.Safari и Chrome, кажется, в порядке со временем ожидания 1. Opera, похоже, не волнует, что я делаю, она вообще не выполняет этот переход ......
Это ошибка оптимизациибраузеры?Или это какое-то недопонимание, которое я имею о переходах?Этот переход называется pushLeft (), который запускается кнопкой «Push» управления влево
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Transitions Effects Exercises</title>
</head>
<body>
<style type='text/css'>
#slideShow {
margin-top: 20px;
position:relative;
}
.slide {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 200px;
/*padding: 20px;*/
background-color: #DDDDDD;
padding: 20px;
}
a {
padding: 10px;
background-color: pink;
}
a:hover {
background-color: yellow;
}
.push-left {
-webkit-transition: left 10s ease-in;
-moz-transition: left 10s ease-in;
-o-transition: left 10s ease-in;
opacity: 1;
}
</style>
<script src='http://code.jquery.com/jquery-1.6.1.min.js' language="JavaScript"></script>
<script language="JavaScript">
function reset() {
$("#slide1").removeClass().addClass('slide');
$("#slide2").removeClass().addClass('slide').css('opacity', 0);
}
function pushLeft2() {
$("#slide2").addClass('push-left').css('left', 0);
}
function pushLeft() {
var width = $('#slideShow').width();
$("#slide2").css('left', width).css('opacity', 1);
//$("#slide2").addClass('push-left').css('left', 0); <- This line must run after setTimeout, or no transition happens in any of the browsers.
setTimeout(pushLeft2, 1);
}
$(document).ready(reset);
</script>
<div>Controls <a onclick='reset();'>Reset</a> <a onclick='pushLeft();'>Push Left</a></div>
<div id="slideShow">
<div id="slide1" class="slide">
<h2>This is Slide 1</h2>
<p>This is the text on slide 1</p>
</div>
<div id="slide2" class="slide">
<h2>This is Slide 2</h2>
<p>Slide 2 has different text</p>
</div>
</div>
</body>
</html>