javascript - 如何为下一页/上一页获取 Page Flipper 动画

Question

我有一个用于笔记本样式 div 的翻页动画:

http://jsfiddle.net/jdell64/c1ytu8mo/2/

$('#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

您只需简单地切换翻转类，添加/删除会创建来回概念，但如果您想翻转更多元素，则翻转类应该保留在卡片上，而应该转到子元素。

顺便回答一下:z-index 将解决重新排序问题......否则子元素将简单地相互叠加，因此最后一个元素在最上面。

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

$('#back').click(function () {
    $('#card').removeClass('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;
}

#card .front {
    z-index: 2;
}
#card .mid {
    z-index: 1;
}
#card div {
    z-index: 0;
}

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