爲什麼這個CSS3轉換時間敏感？

下面是一個簡短的HTML文件，其中包括所有的CSS和幾乎所有的javascript來做一些轉換（它使用來自cdn的jquery）。這是我正在玩的一個小沙箱，看看這些東西是如何工作的。我遇到的情況是，有時候過渡不會發生。 FF4，Safari和Chrome中似乎就是這種情況。在FF4中，發送到setTimeout的超時時間必須> 10，有時> 16，否則仍然失敗。 Safari和Chrome似乎沒問題，暫停時間爲1. Opera似乎並不在乎我在做什麼，它根本就沒有這樣做......爲什麼這個CSS3轉換時間敏感？

這是瀏覽器中的優化錯誤嗎？或者，這是否有一些誤解，我有過渡？有問題的過渡），這是由控制「按鈕」推左

<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>

來源

2011-05-16 boatcoder

歌劇，你必須寫「一切」，歌劇不接受所有類型的過渡

觸發一個叫pushLeft（

-o-transition: all 10s ease-in;

和慣例隨時添加一個不帶包

transition: left 10s ease-in;

來源

2011-07-22 23:47:17

爲什麼這個CSS3轉換時間敏感？

回答

相關問題