1

移行中の固定背景に問題があります。私は2つのパネルを持っています.panel-1には2つの画像があり、それぞれ左から右と右から左にアニメーション化されます.基本的には、トランジションをトリガーするために「アニメーション」クラスを追加するだけです. 移行中、panel-2 (背景が固定され、テキスト コンテンツがいくつかある) がクロムでちらつきます。ライブでチェックしてくださいhttp://jsfiddle.net/7EqaV/embedded/result/

何かアドバイス？前もって感謝します！..

HTML コード:

<div class="wrapper">
<input type="button" value='animate' id="animate" />
<div class="panel-1">
    <div class="items" id="slideLeft">
        <img src="http://sitetest12302.businesscatalyst.com/images/p1.jpg">
    </div>
    <div class="items" id="slideRight">
        <img src="http://sitetest12302.businesscatalyst.com/images/p2.jpg">
    </div>
</div>
<div class="panel-2">
    <div class="bg"></div>
    <div class="content">
            <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna</h1>

    </div>
</div>

CSS コード:

    .wrapper {
    width:500px;
    margin:auto;
}
.panel-1, .panel-2 {
    width:100%;
    height: 200px;
    border: 2px solid #000;
    position:relative;
}
.panel-2 .bg {
    width:100%;
    height: 200px;
    background:url(http://sitetest12302.businesscatalyst.com/images/bg.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;
    position: absolute;
    background-position:center;
}
.items {
    width:150px;
    height:150px;
}
.content {
    position:absolute;
    z-index:2;
    width:100%;
}
h1 {
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    color:#FFF;
    font-size:15px;
}
#slideLeft, #slideRight {
    -webkit-transition:-webkit-transform 1s 0s;
    -moz-transition: -moz-transform 1s 0s;
    width:150px;
    height:150px;
}
#slideLeft {
    float:left;
    -webkit-transform:translate3d(-200%, 0, 0);
    -moz-transform:translate3d(-200%, 0, 0);
}
#slideRight {
    float:right;
    -webkit-transform:translate3d(200%, 0, 0);
    -moz-transform:translate3d(200%, 0, 0);
}
.animate #slideLeft, .animate #slideRight {
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
}
.animate h1 {
    filter:alpha(opacity=100) !important;
    -moz-opacity:1 !important;
    opacity: 1 !important;
}

JS コード:

$(document).ready(function () {
    $('input#animate').click(function () {
        $('.panel-1, .panel-2').toggleClass('animate');
    });
});
4

1 に答える 1

0

こんにちは！

このCSSを使用してみてください：

-webkit-backface-visibility: hidden;
/*  will not work for sprites and image backgrounds */

body {-webkit-transform:translate3d(0,0,0);}
/* screws up backgrounds that are tiled  */

noflick というクラスとこの css を作成するとします。 

.noflick{-webkit-transform:translate3d(0,0,0);}

これがお役に立てば幸いです。

于 2014-01-22T13:07:37.023 に答える