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 对于所有元素都不相同。过渡不应同时在 .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/

于 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 回答