翻页动画 - 仅限单页 [英] Page flip animation - Single page only

查看：69
本文介绍了翻页动画 - 仅限单页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

下面的代码工作，但我不知道如何使这项工作的单页。即。



http://codepen.io/timohausmann/pen/xdKkA 

  .page {
 cursor：pointer; 
 position：absolute; 
 color：black; 
 width：100％; 
 height：100％; 
 
 transition：1.5s transform; 
 transform-style：preserve-3d; 
 transform-origin：left center; 
} 
 .front，
 .back {
 position：absolute; 
 
 width：100％; 
 height：100％; 
 padding：10％5％5％; 
 box-sizing：border-box; 
 
 backface-visibility：hidden; 
 background：-webkit-gradient（线性，0％0％，100％100％，从（#FFFFFF）到（#CCCCCC））; 
 background：linear-gradient（to bottom right，#fff，#ccc）; 
} 
 .back {
 transform：rotateY（180deg）; 
} 
 
 .page.active {
 z-index：1; 
} 
 .page.flipped {
 transform：rotateY（-180deg）; 
} 
 .page.flipped：last-of-type {
 z-index：1; 
}


解决方案

通过进行以下更改将后页显示动画为单页显示动画：




  • 不需要两个 div 元素（用于页面的正面和背面），因为没有背靠背显示。每个部分将表示书中的单个页面。 div class ='back'可以完全删除。 （注意：我还将 div class ='front'重命名为 div class ='content'因为前面在这里不意味着任何东西）。

  • 旋转-180deg通常用于显示元素的背面。因为在单页翻页动画中没有背面显示，所以-90deg的旋转足以代替-180deg的旋转。

  • 将更高的 z-index 添加到元素的翻转和活动状态，以保持当前页面之后的页面后面在屏幕上。 opacity：0 也被添加到它们，以防止它们可见。 c（中的第二个时间值）transition：opacity 0.5s 0.5s / code>），以防止 opacity 在完成转换之前更改屏幕上回移动）。

  • 从活动状态到翻转状态的更改应同时进行， jQuery中的 addClass 和 removeClass 替换为单个 toggleClass

  • 移动页面的函数调用（对于没有启用触摸的设备）从页面上的点击移动到上一页和下一页按钮的用法。



  var currentPage = 0; $（'body'）.on（'click' #next'，nextPage）.on（'click'，'#prev'，prevPage）; $（'book'）。hammer（）。on（swipeleft，nextPage）; $（'book'）。 （）。on（swiperight，prevPage）; function prevPage（）{$（'。flipped'）.last（）.toggleClass（'flipped active'）.siblings（'。page'）.removeClass '）;} function nextPage（）{$（'。active'）.toggleClass（'active flipped'）.next（'。page'）.addClass（'active'）;}  pre> 
  html {height：100％; overflow：hidden;} body {background：black; margin：0; width：100％; height：100％;} h1 {text-align：center;}。scene {width：90％;身高：90％;保证金：5％5％5％5％;透视：1000px;}。 width：100％;高度：100％; transform-style：preserve-3d;}。page {position：absolute;颜色：黑色; width：100％;高度：100％; transition：opacity 0.5s 0.5s; transform-style：preserve-3d; transform-origin：left center;}。content {position：absolute; width：100％;高度：100％;填充：10％5％5％; box-sizing：border-box; backface-visibility：hidden;背景：-webkit梯度（线性，0％0％，100％100％，从（#FFFFFF）到（#CCCCCC））; background：linear-gradient（to bottom right，#fff，#ccc）;}。page.active {transform：rotateY（0deg）;过渡：1.5s变换; z-index：1;}。page.flipped {transform：rotateY（-90deg）;过渡：1.5s变换; z-index：2;}。active〜.page {opacity：0;} p {margin：0 0 0.1em; text-indent：1em;}。qr {margin：50px auto; max-width：50％;}。qr img {display：block;} / * iPads（portrait）----------- * / @ media only screen and（min-device-width：768px）和（max-device-width：1024px）和（orientation：portrait）{.scene {width：90％;身高：90％;保证金：5％; }} / *为按钮添加* /＃next {position：absolute; right：0px; bottom：0px;}＃prev {position：absolute; left：0px; bottom：0px;}  
 
 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =scene> < article class =book> < section class =page active> < div class =content> < h1> Quick iPad Flipping Book Demo< / h1> < p> Sehen Sie，Webstandards sind das Regelwerk，auf dem Webseiten aufbauen。因此，gibt es RegelnfürHTML，CSS，JavaScript oder auch XML; Worte，die Sie vielleicht schon einmal von Ihrem Entwicklergehörthaben。 Diese Standards sorgendafür，dass alle Beteiligten aus einer Webseite dengrößtenNutzen ziehen。 < / p> < p> Im Gegensatz zufrüherenWebseitenmüssenwir zum Beispiel nicht mehr zwei verschiedene Webseitenfürden Internet Explorer und einen anderen浏览器程序。 Es reicht eine Seite，die-richtig angelegt-sowohl auf verschiedenen Browsern im Netz funktioniert，aber ebenso gutfürden Ausdruck oder< / p> < div class =qr> < img src =http://www.qrcode-generator.de/getCode/?cht=qr&chl=http%3A%2F%2Fcodepen.io%2Ftimohausmann%2Ffull%2FxdKkA&chs=180x180&choe=UTF -8& chld = L | 0/> qr code for codepen full page< / div> < / div> < / section> < section class =page> < div class =content> < h1>  -  2  - < / h1> < p> Sehen Sie，Webstandards sind das Regelwerk，auf dem Webseiten aufbauen。因此，gibt es RegelnfürHTML，CSS，JavaScript oder auch XML; Worte，die Sie vielleicht schon einmal von Ihrem Entwicklergehörthaben。 Diese Standards sorgendafür，dass alle Beteiligten aus einer Webseite dengrößtenNutzen ziehen。 < / p> < p> Im Gegensatz zufrüherenWebseitenmüssenwir zum Beispiel nicht mehr zwei verschiedene Webseitenfürden Internet Explorer und einen anderen浏览器程序。 Es reicht eine Seite，die-richtig angelegt-sowohl auf verschiedenen Browsern im Netz funktioniert，aber ebenso gutfürden Ausdruck oder< / p> < / div> < / section> < section class =page> < div class =content> < h1>  -  3  - < / h1> < p> Sehen Sie，Webstandards sind das Regelwerk，auf dem Webseiten aufbauen。因此，gibt es RegelnfürHTML，CSS，JavaScript oder auch XML; Worte，die Sie vielleicht schon einmal von Ihrem Entwicklergehörthaben。 Diese Standards sorgendafür，dass alle Beteiligten aus einer Webseite dengrößtenNutzen ziehen。 < / p> < p> Im Gegensatz zufrüherenWebseitenmüssenwir zum Beispiel nicht mehr zwei verschiedene Webseitenfürden Internet Explorer und einen anderen浏览器程序。 Es reicht eine Seite，die-richtig angelegt-sowohl auf verschiedenen Browsern im Netz funktioniert，aber ebenso gutfürden Ausdruck oder< / p> < / div> < / section> < section class =page> < div class =content> < h1>  -  4  - < / h1> < p> Sehen Sie，Webstandards sind das Regelwerk，auf dem Webseiten aufbauen。因此，gibt es RegelnfürHTML，CSS，JavaScript oder auch XML; Worte，die Sie vielleicht schon einmal von Ihrem Entwicklergehörthaben。 Diese Standards sorgendafür，dass alle Beteiligten aus einer Webseite dengrößtenNutzen ziehen。 < / p> < p> Im Gegensatz zufrüherenWebseitenmüssenwir zum Beispiel nicht mehr zwei verschiedene Webseitenfürden Internet Explorer und einen anderen浏览器程序。 Es reicht eine Seite，die-richtig angelegt-sowohl auf verschiedenen Browsern im Netz funktioniert，aber ebenso gutfürden Ausdruck oder< / p> < / div> < / section> < section class =page> < div class =content> < h1>  -  5  - < / h1> < p> Sehen Sie，Webstandards sind das Regelwerk，auf dem Webseiten aufbauen。因此，gibt es RegelnfürHTML，CSS，JavaScript oder auch XML; Worte，die Sie vielleicht schon einmal von Ihrem Entwicklergehörthaben。 Diese Standards sorgendafür，dass alle Beteiligten aus einer Webseite dengrößtenNutzen ziehen。 < / p> < p> Im Gegensatz zufrüherenWebseitenmüssenwir zum Beispiel nicht mehr zwei verschiedene Webseitenfürden Internet Explorer und einen anderen浏览器程序。 Es reicht eine Seite，die-richtig angelegt-sowohl auf verschiedenen Browsern im Netz funktioniert，aber ebenso gutfürden Ausdruck oder< / p> < / div> < / section> < / article> < button id ='next'>下一页< / button> < button id ='prev'>上一页< / button>< / div>


The following code works, but I'm not sure how to make this work for single page only. ie. when only one page is being displayed onscreen instead of two like now.

http://codepen.io/timohausmann/pen/xdKkA

.page {
  cursor: pointer;
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;

  transition: 1.5s transform;
  transform-style: preserve-3d;  
  transform-origin: left center;
}
.front,
.back {
  position: absolute;

  width: 100%;
  height: 100%;
  padding: 10% 5% 5%;
  box-sizing: border-box;

  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.back {
  transform: rotateY(180deg);
}

.page.active {
  z-index: 1;
}
.page.flipped {
  transform: rotateY(-180deg);
}
.page.flipped:last-of-type {
  z-index: 1;
}

解决方案

You can convert that back to back page display animation into a single page display animation by making the following changes:

  • There is no need for two div elements (for front and back sides of the page) because there is no back to back display. Each section would represent a single page in the book. The div class='back' can be removed totally. (Note: I have also renamed the div class='front' to div class='content' because front doesn't mean anything here).
  • A rotation by -180deg is generally used to display the backside of the element. Since there is no backside to display in a single page flip animation, a rotation by -90deg is enough instead of a rotation by -180deg.
  • A higher z-index is added to the flipped and active states of the element to keep the pages that are after the current page behind on the screen. opacity: 0 is also added to them to prevent them from being visible.
  • A delay is added to the transition (second time value in transition: opacity 0.5s 0.5s) to prevent the opacity from changing before the transform is complete (thus avoiding the partly black screen on back movement).
  • As the change from active state to flipped state should happen simultaneously, addClass and removeClass in jQuery are replaced with a single toggleClass call.
  • The function call to move pages (for devices that don't have touch enabled) is moved from a click on the page to the usage of Previous and Next buttons.

var currentPage = 0;

$('body')
  .on('click', '#next', nextPage)
  .on('click', '#prev', prevPage);

$('.book').hammer().on("swipeleft", nextPage);
$('.book').hammer().on("swiperight", prevPage);

function prevPage() {
  $('.flipped')
    .last()
    .toggleClass('flipped active')
    .siblings('.page')
    .removeClass('active');
}

function nextPage() {
  $('.active')
    .toggleClass('active flipped')
    .next('.page')
    .addClass('active');
}

html {
  height: 100%;
  overflow: hidden;
}
body {
  background: black;
  margin: 0;
  width: 100%;
  height: 100%;
}
h1 {
  text-align: center;
}
.scene {
  width: 90%;
  height: 90%;
  margin: 5% 5% 5% 5%;
  perspective: 1000px;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.page {
  position: absolute;
  color: black;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s 0.5s;
  transform-style: preserve-3d;
  transform-origin: left center;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10% 5% 5%;
  box-sizing: border-box;
  backface-visibility: hidden;
  background: -webkit-gradient(linear, 0% 0%, 100% 100%, from(#FFFFFF), to(#CCCCCC));
  background: linear-gradient(to bottom right, #fff, #ccc);
}
.page.active {
  transform: rotateY(0deg);
  transition: 1.5s transform;
  z-index: 1;
}
.page.flipped {
  transform: rotateY(-90deg);
  transition: 1.5s transform;
  z-index: 2;
}
.active ~ .page{
  opacity: 0;
}
p {
  margin: 0 0 0.1em;
  text-indent: 1em;
}
.qr {
  margin: 50px auto;
  max-width: 50%;
}
.qr img {
  display: block;
}
/* iPads (portrait) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .scene {
    width: 90%;
    height: 90%;
    margin: 5%;
  }
}
/* added for the buttons */

#next {
  position: absolute;
  right: 0px;
  bottom: 0px;
}
#prev {
  position: absolute;
  left: 0px;
  bottom: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scene">
  <article class="book">
    <section class="page active">
      <div class="content">
        <h1>Quick iPad Flipping Book Demo</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
        <div class="qr">
          <img src="http://www.qrcode-generator.de/getCode/?cht=qr&chl=http%3A%2F%2Fcodepen.io%2Ftimohausmann%2Ffull%2FxdKkA&chs=180x180&choe=UTF-8&chld=L|0" />qr code for codepen full page</div>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 2 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 3 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 4 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>
    <section class="page">
      <div class="content">
        <h1>– 5 –</h1>
        <p>
          Sehen Sie, Webstandards sind das Regelwerk, auf dem Webseiten aufbauen. So gibt es Regeln für HTML, CSS, JavaScript oder auch XML; Worte, die Sie vielleicht schon einmal von Ihrem Entwickler gehört haben. Diese Standards sorgen dafür, dass alle Beteiligten
          aus einer Webseite den größten Nutzen ziehen.
        </p>
        <p>
          Im Gegensatz zu früheren Webseiten müssen wir zum Beispiel nicht mehr zwei verschiedene Webseiten für den Internet Explorer und einen anderen Browser programmieren. Es reicht eine Seite, die - richtig angelegt - sowohl auf verschiedenen Browsern im Netz
          funktioniert, aber ebenso gut für den Ausdruck oder
        </p>
      </div>
    </section>

  </article>
  <button id='next'>Next</button>
  <button id='prev'>Previous</button>
</div>

这篇关于翻页动画 - 仅限单页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆