Question

下面是一个简短的html文件，其中包含所有css和几乎所有的javascript来进行一些转换（它使用来自cdn的jquery）。这是一个我正在玩的小沙箱，看看这些东西是如何工作的。我遇到的是有时过渡不会发生。这似乎是FF4，Safari和Chrome的情况。在FF4中，发送到setTimeout的超时必须是> 10，有时＆gt; 16，或者它仍然失败。 Safari和Chrome似乎没问题，超时为1. Opera似乎并不关心我做什么，它根本不做这个过渡......

这是浏览器中的优化错误吗？或者这是我对转换的一些误解吗？有问题的转换是名为pushLeft（）的转换，它由控件“按钮”按下左键

触发

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

Answer 1

对于歌剧你必须写“全部”，歌剧不接受所有类型的过渡

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

并且对于惯例，总是添加一个没有套件

transition: left 10s ease-in;

为什么这个CSS3过渡时间敏感？

1 个答案: