Question

我有一个用于笔记本风格div的页面翻转动画：

$('#next').click(function () {
        $('#card').toggleClass('flipped');
  
  
})

.container {
    background: lightgray;
    width: 500px;
    height:500px;
    margin: 0 auto;
    perspective: 800px;
}
#card {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    transform-style: preserve-3d;
}
#card > div {
    position:absolute;
    width:100%;
    height: 50%;
    background: rgba(255, 255, 255, 0.7);
    top: 125px;
    /* backface-visibility: hidden; */
    transition: transform 1s, visibility 0.9s;
    transform-origin: 50% 0%;
}
#card.flipped .front {
    transform: rotateX(360deg);
    transform-origin: 50% 0%;
    visibility: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
    <div id="card">
        <div class="back">Back</div>
        <div id="mid" class="mid">Middle</div>
        <div id="front" class="front">Front</div>
    </div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>

<a id="next" href="#">next</a>

“下一步”按钮似乎有效，但它来回切换页面。如何让它在无限循环中“下一步”，并让前一页做同样的事情？

另外，作为旁白...我不确定为什么我的'前面'内容必须在底部。

更多信息

基于this article，我可以这样做：

$('#next').click(function () {
     myBox = $('#card')
     myBox.toggleClass('flipped');

     myBox.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
     function (e) {
         console.log('done!');
         console.log(e);
         // code to execute after transition ends
     });
 })

但由于某种原因，它会发射两次。

更新我按下了“下一个”按钮，但我无法找到后退按钮：

http://jsfiddle.net/jdell64/u3aebu1L/5/

Answer 1

你只需切换翻转的类，添加/删除会创建一个前后概念，但如果你想翻转更多的元素，那么翻转的类应该保留在卡上，而应该转到子元素。 / p>

回答你的意思：z-index将解决重新排序问题......否则子元素将简单地相互叠加，因此最后一个元素位于顶部。

＆＃13;

$('#next').click(function () {
    $('#card').addClass('flipped');
});

$('#back').click(function () {
    $('#card').removeClass('flipped');
});

＆＃13;

.container {
    background: lightgray;
    width: 500px;
    height:500px;
    margin: 0 auto;
    perspective: 800px;
}
#card {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    transform-style: preserve-3d;
}
#card > div {
    position:absolute;
    width:100%;
    height: 50%;
    background: rgba(255, 255, 255, 0.7);
    top: 125px;
    /* backface-visibility: hidden; */
    transition: transform 1s, visibility 0.9s;
    transform-origin: 50% 0%;
}
#card.flipped .front {
    transform: rotateX(360deg);
    transform-origin: 50% 0%;
    visibility: hidden;
}

#card .front {
    z-index: 2;
}
#card .mid {
    z-index: 1;
}
#card div {
    z-index: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
    <div id="card">
        <div id="front" class="front">Front</div>
        <div id="mid" class="mid">Middle</div>
        <div class="back">Back</div>
    </div>
</section>
<br/>
<br/>
<br/>
<br/>
<a id="back" href="#">back</a>

<a id="next" href="#">next</a>

＆＃13;

Answer 2

您还应该将前班切换到下一页，这样动画将始终相同，因为关闭'前'类

Answer 3

这是未来你...我找到了一个hacky解决方案：

http://jsfiddle.net/jdell64/u3aebu1L/

基本上，我添加了一个.middle类用于其他方向动画。我还添加了一个noAnimate类来忽略动画。

  .container {
    background: lightgray;
    width: 500px;
    height:500px;
    margin: 0 auto;
    perspective: 800px;
}
#card {
    width: 50%;
    height: 100%;
    margin: 0 auto;
    transform-style: preserve-3d;
}
#card > div {
    position:absolute;
    width:100%;
    height: 50%;
    //background: rgba(255, 255, 255, 0.6);
    top: 125px;
    transform-origin: 50% 0%;
}
#card .front {
    transition: transform 1s, visibility 0.9s;
}
#card .middle {
    transition: visibility 0.1s, transform 1s;
}
#card.flipped .front {
    transform: rotateX(360deg);
    transform-origin: 50% 0%;
    visibility: hidden;
}
#card.flopped .middle {
    transform: rotateX(-360deg);
    transform-origin: 50% 0%;
}
.noAnimate {
    -moz-transition-property: none !important;
    -webkit-transition-property: none !important;
    -o-transition-property: none !important;
    transition-property: none !important;
}
.front {
    background: lightgreen;
}
.middle {
    background: lightblue;
}
.back {
    background: goldenrod;
}

如何获取下一页/上一页的Page Flipper动画

3 个答案: