为什么这个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转换时间敏感？

回答

相关问题