如何获得下一页/上一页的页面翻转动画

How to get Page Flipper animation for next / prev pages

本文关键字：一页 翻转 动画 何获得      更新时间：2023-09-26

我有一个样式为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>

"下一步"按钮似乎可以工作，但它来回切换页面。我该如何让它在无限循环中"下一个"，并让前一页做同样的事情?

另外，作为题外话…我不知道为什么我的"前面"内容必须在底部。

更多信息

基于本文，我可以这样做:

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

您只需切换翻转类，添加/删除将创建一个来回的概念，但如果您想翻转更多的元素，那么翻转类应该留在卡片上，而不是去子元素。

回答你的题外话: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>

你还应该将front类切换到下一页，这样动画将始终保持不变，因为关闭了'front'类

这是未来的你…我找到了一个简单的解决方案:

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;
}
相关文章：