1

私はトリッキーな状況に陥っています。下部にクリック可能な紙片を配置した、一種のリアルなチラシを作成しようとしています。視覚的な参照として、次のようなものがあります: http://static.someecards.com/someecards/images/feed_assets/4d657f7fa4817.jpg

空の div を使用してフライヤーの本文を作成し、この div の下部に「紙片」を絶対に配置しました。次に、チラシ本体の下部に「破れた紙」の境界線イメージを追加したいので、ストリップに負の z-index を与えました。

次に、破れた紙の境界線を覆うために、それらの上に空の透明な div を配置し、CSS3 アニメーションがトリガーされると (JS を介して) 消える単色の疑似要素を配置します。

<div class="flyer-body">

    <div class="strip"></div> <!-- this will be animated via CSS3 -->
    <div class="strip-wrapper"></div> <!-- this is a clone of the "strip" div, but transparent (made for z-index problems with animations). a click on this div will trigger the animation --> 

</div><!-- end flyer-body -->

参照用の jsFiddle: http://jsfiddle.net/XR7LT/

ご覧のとおり、優しく消えるように擬似要素に fadeOut() 効果を適用しています。問題は、fadeOut() が最初の疑似要素にのみ適用され、他の要素は何の効果もなく隠されていることです。

問題は、Chromium と FF ブラウザの両方、Ubuntu Linux 12.10 で発生します。

何か案は？

前もって感謝します。

4

2 に答える 2

2

CSS はすべての要素で同じではありません。トランジションは .strapamiX と .strappamiX-wrap の両方にあってはなりません。

それらをラップから削除しました：

.strappami1 {
    display: block;
    width: 100px;
    height: 250px;
    background: red;
    z-index: -23;
    position: absolute;
    bottom: -200px;
    left: 103px;
    transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -webkit-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
}

.strappami1-wrap {
    display: block;
    position: absolute;
    width: 100px;
    height: 250px;
    bottom: -200px;
    left: 103px;
    background: transparent;
}

ここにあなたのフィドルのフォークを作成しました： http://jsfiddle.net/sn6ZT/1/

于 2013-02-14T15:10:54.003 に答える
0

Roise の後にここにたどり着きましたが、親子関係を活用して複数のクラスを追加することで、ソリューションを大幅に簡素化できるはずです。

http://jsfiddle.net/XR7LT/4/

すべてが同じ動作をする必要がある 5 つの要素がある場合、それらすべてに同じクラスを使用し、それらすべてにコードを適用します。次に、追加のクラスをいくつか追加して、追加の部分を少し移動できます。

よりシンプルな HTML

<section class="flyer">

    <div class="strappami-wrap w0">
        <div class="cover"></div>
        <div class="strappami"></div>
    </div>

    <div class="strappami-wrap w1">
        <div class="cover"></div>
        <div class="strappami"></div>
    </div>

    <div class="strappami-wrap w2">
        <div class="cover"></div>
        <div class="strappami"></div>
    </div>

    <div class="strappami-wrap w3">
        <div class="cover"></div>
        <div class="strappami"></div>
    </div>

    <div class="strappami-wrap w4">
        <div class="cover"></div>
        <div class="strappami"></div>
    </div>
</section>

よりシンプルな CSS

.flyer {
    display: block;
    width: 900px;
    height: 220px;
    background: yellow;
    margin: 0 auto;
    position: relative;
}

.strappami {
    display: block;
    width: 100px;
    height: 250px;
    background: red;
    z-index: -23;
    position: absolute;

    left: 0;
    transition: all 2s ease-in;
    -moz-transition: all 2s ease-in;
    -webkit-transition: all 2s ease-in;
    -o-transition: all 2s ease-in;
}

.strappami-wrap {
    display: block;
    position: absolute;
    width: 100px;
    height: 250px;
    background: transparent;
    bottom: -200px;
    left: 0px;
}

.strappami-wrap.w1 {
    left: 110px
}

.strappami-wrap.w2 {
    left: 220px
}

.strappami-wrap.w3 {
    left: 330px
}

.strappami-wrap.w4 {
    left: 440px
}
.strappami-wrap .cover {
    content: '';
    display: block;
    position: absolute;
    width: 100px;
    height: 50px;
    background: green;
    top: 30px;
    left: 0px;
}


.strapping {
    bottom: -900px;
    opacity: 1;
    z-index: -200;
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
}

.strapping-alt {
    bottom: -800px;
    opacity: 1;
    z-index: -200;
    -webkit-transform: rotate(3deg);

    -moz-transform: rotate(3deg);
}

シンプルなJS

$(document).ready(function() {  

    $(".strappami-wrap").on('click', function() {
        var r = Math.floor(Math.random()*10);
        if (r < 5){                    
          $(this).find(".strappami").addClass('strapping');
        } else {
          $(this).find(".strappami").addClass('strapping-alt');
        }
        $(this).find(".cover").fadeOut();
    });
});
于 2013-02-14T15:40:03.110 に答える