Question

我正在进行Q和A测验游戏，我应该每页只显示一个问题（整页）。每个页面都有2个按钮 YES 和 NO 。

在不滚动的情况下，当用户点击否时，整个页面转移并显示正确的答案。当用户点击是时，整个页面会向下转移以查看下一个问题。

我已经检查了FullPageJs JS库，但是我想在没有任何库的情况下这样做。

我只尝试过从上到下过渡整页，但无法从左到右进行过渡。
我怎样才能进行整页翻译并支持IE8＆amp; IE9？
谢谢！

HTML

    <body>
    <div class="site-wrapper">
        <div class="site-wrapper-inner">
            <div class="container">
                <div class="row">
                    <div class="brand-image-container">
                        <div class="centerer"></div>
                        <img src="http://placehold.it/150x70" alt="" /> 
                    </div>                      
                </div>
                <div class="row">
                    <div class="img-container">
                        <div class="centerer"></div>
                        <img src="http://placehold.it/400x250" alt="" />    
                    </div>

                <div class="wrapper">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus amet optio vel alias nobis nostrum quaerat quas doloremque, libero dicta pariatur cupiditate, reiciendis quo nihil dolorem. Tempora saepe suscipit consequatur!
                    </p>                    
                </div>
            </div>
            </div>

        <div class="footer">
            <a href="#" class="button btn-medium btn-true">TRUE</a>
            <a href="#" class="button btn-medium btn-false">FALSE</a>
        </div>              
        </div>
    </div>
</body>

CSS：

* {
  box-sizing: border-box; }

html {
  font-family: "Lucida Sans", sans-serif, Arial;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block; }

p {
  margin: 0; }

.site-wrapper {
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #CBD7F5;
  overflow: hidden; }

.site-wrapper-inner {
  vertical-align: middle;
  width: 100%;
  height: 100%;
  background-color: #aaa;
  overflow: hidden; }

.container {
  width: 100%;
  background-color: #eeeeee;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  height: 100%;
  float: left; }

.wrapper {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  padding: 0 10px; }

.img-container, .brand-image-container {
  position: relative;
  padding: 0 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  /* Align center inline elements */
  font: 0/0 a;
  /* Hide the characters like spaces */ }

.brand-image-container {
  margin-bottom: 10px; }

.centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%; }

.img-container img {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;
  /* <-- Set maximum height to 100% of its parent */
  max-width: 100%;
  /* <-- Set maximum width to 100% of its parent */ }

.footer {
  padding: 15px 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  background-color: #345; }

.button {
  display: inline-block;
  margin: 0;
  font-weight: 400;
  line-height: 1.42857143;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0;
  border: 1px solid transparent;
  background-image: none;
  cursor: pointer; }

.btn-medium {
  margin: 10px 15px;
  font-size: 20px;
  line-height: 1.33333333;
  text-shadow: none; }

.btn-true, .btn-false {
  padding: 5px 20px;
  color: #ffffff;
  border-radius: 0;
  border: 1px solid #336699;
  background-color: #337799; }

a {
  text-decoration: none; }

.go-down-section {
  margin-top: -1000px;
  transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out; }

.go-right-section {
  margin-left: -100%;
  transition: all 0.7s ease-in-out;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out; }

.go-away {
  top: 0;
  position: absolute; }

@media (min-width: 640px) {
  .wrapper {
    width: 400px; } }
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .wrapper {
    width: 400px; }

  .footer {
    font-size: 21px; } }

JS：

$(document).ready( function() {
  $('#true1').click( function(){
    $('.section-one').addClass('go-down-section');
  });
  $('#false2').click( function(){
    $('.section-two').addClass('go-right-section');
    $('.section-three').addClass('go-away');
  });

});

更新

这是codepen page with full code

Answer 1

我检查了FullPageJs JS库，例如，但我想这样做没有任何图书馆。

如果你想学习或做它作为练习，你可以去。

如果你真的想要一个好的最终产品，经过成千上万的测试，我强烈建议你去图书馆。为什么？好吧，图书馆不会因为人们懒得编码200行而变得大而流行。以下是一些原因：

成千上万人在不同设备和浏览器中经过高度测试（Windows Phone，Adroid，iOS，触摸屏电脑，Opera，Safari ......）
与触控设备的兼容性。
与动态滚动的兼容性（Apple笔记本电脑，魔术鼠标......）。
与旧浏览器的兼容性（IE 8，Opera 12 ...）。
现代浏览器和触控设备（css3）的良好表现。
调整视口大小时重新计算部分和幻灯片。
在网址中返回锚点。
响应模式。
辅助功能（键盘，滚动条，浏览器历史记录）。
使用回调来解雇行动。
有很多方法和选择。

如果你使用fullPage.js，你只需要7Kb gzip就可以获得所有这些。

如何使用CSS3过渡整页并支持IE8，IE9？

1 个答案: