Question

我处在一个棘手的情况 - 我正在尝试建立一种逼真的传单，底部有可点击的纸条。仅供参考，如下所示：http://static.someecards.com/someecards/images/feed_assets/4d657f7fa4817.jpg

我用空div构建了传单的主体，我绝对将“纸条”放在这个div的底部。然后，因为我想在锭翼底部添加一个“撕裂的纸”边框图像，所以我给了条带一个负的z指数。

然后，为了覆盖撕纸边框，我在它们的顶部放置了一个空的透明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。

有什么想法吗？

提前致谢。

Answer 1

您的CSS对于所有元素都不相同。转换不应该同时包含.strappamiX和.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/

Answer 2

我在Roise之后来到这里，但你应该能够通过利用父子关系和添加多个类来显着简化你的解决方案。

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

当你有5个元素都应该具有相同的行为时，对所有元素使用相同的类，并将代码应用于所有元素。然后你可以添加一些额外的类来移动其他部分。

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

SIMPLER 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);
}

SIMPLER 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();
    });
});

fadeOut（）仅应用于first：before伪元素

2 个答案: