logo标签列表

使用CSS和jQuery进行页面过渡

jqueryhtmlcss
8

我真的需要你的帮助。我正在创建一个页面过渡效果，就像这个链接中的一样：http://goo.gl/74K2rQ

但是我要按照自己的设计来实现这个动画：http://goo.gl/NVjcZ2

到目前为止，这是我的实验结果：https://jsfiddle.net/f7xpe0fo/1/

但它还不符合我的设计。请在此处查看我的实际 JSFIDDLE：

https://jsfiddle.net/8y801eqh/11/

我的 HTML 包含两个 ID 为 main-page 和 next-page 的 div。第一页是红色的，下一页是绿色的。默认情况下，我隐藏了 next-page div。请查看我的 HTML：

<div id="main-page">
 <div>
     <h1>Page Transition</h1>
       <a href="#"> Click Here</a>
</div>

</div>


<div id="next-page">
 <div>
     <h1>This is the 2nd page</h1>
       <a href="#"> Click Here</a>
</div>

</div>

现在我会将他们的设计匹配整个页面来修复我的CSS：
#main-page {
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  background-color: #e74c3c;
 padding: 40px 0 40px 0;
}

h1{
   font-family: Helvetica;
   color: #fff;
    font-weight: normal;
    text-align: center;

}

#next-page{
      height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  background-color: #27ae60;
 padding: 40px 0 40px 0;
    display: none;
}



a{
 font-family: Helvetica;
  color: #fff;
    border: 2px solid #fff;
    padding: 10px 15px;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 20%;
    text-decoration: none;
}

基于我的实验：https://jsfiddle.net/f7xpe0fo/1/ 当我单击作为链接的“点击此处”一词时，它必须将页面包装到下一页并完全遵循这个设计：http://goo.gl/NVjcZ2 我试图进行动画的第一阶段过渡，但是我不知道如何继续进行下一阶段。我理解需要在这个上面使用jQuery，但我该怎么做呢？有人能帮忙吗。
这是我自己的JSFIDDLE：https://jsfiddle.net/8y801eqh/11/
smoothState.js 可能会引起您的兴趣。 - Oka
尝试这个 https://jsfiddle.net/ZigmaEmpire/8y801eqh/18/ 我使用了你的HTML并进行了修改。 - Dickens A S
4个回答
2

我已经找到了您的解决方案，请在此处查看：http://transitiontest.comeze.com/

test1 = 半页，test2 = 全页，test3 = 单页

在这个例子中，有两个主要对象：#main-page 和 #next-page，它们都共享相同的默认属性，除了它们的背景颜色：

height: 25px;
width: 375px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
background-color: #27ae60;
display: none;

我使用 position: absolute; 和边距来使对象居中。为了隐藏它，我将 display 设为 none;。

在页面加载时，我首先重置主对象的所有属性，并淡入它，如下所示。

当单击 .linkmain 或 .linknext 时，它们都执行相同的函数，但针对不同的对象（主对象或下一个对象）。

该函数首先淡出主对象中的文本并使该对象缩小。在这两个操作完成后，该对象使用过渡旋转函数进行旋转。

完成所有这些操作后，该函数会淡出单击的对象，以显示新对象。

下一步是显示新对象：

同样地，我首先重置对象的所有属性，并使其淡入。

接下来，我更改对象的背景颜色，使其与新对象的颜色匹配。

完成此操作后，我先动画高度，然后是宽度，最后淡入新对象的内容。

JS

// This function is used to transition rotation
$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

// Set all properties of main object to default and fade it in
$("#main-page").css("background-color", "#e74c3c");
$("#main-page").css("height", "100vh");
$("#main-page").css("width", "100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();

// This gets activated once clicked on object .linkmain
$(".linkmain").on("click", function() {
    $(".maincontent").fadeOut();
    $("#main-page").animate({
        width: "25px",
        height: "375px"
    }, function() {
        $(this).animateRotate(90);
    });

    // Hide the main object after all the animations above are finished
    setTimeout(function() {
        $("#main-page").fadeOut();       
    }, 1500);

    // Fade in the new page after all the animations above are finished
    setTimeout(function() {
        $("#next-page").animateRotate(0, 0);
        $("#next-page").css("height", "25px");
        $("#next-page").css("width", "375px");
        $("#next-page").fadeIn();
        $("#next-page").animate({
            backgroundColor: "#27ae60"
        }, function() {
            $(this).animate({
                height: "100vh"
            }, function() {
                $(this).animate({
                    width: $("body").width()
                }, function() {
                    $(".nextcontent").fadeIn(300);
                });
            });
        });
    }, 800);
});

// This gets activated once clicked on object .linknext 
$(".linknext").on("click", function() {
    $(".nextcontent").fadeOut();
    $("#next-page").animate({
        width: "25px",
        height: "375px"
    }, function() {
        $(this).animateRotate(-90);
    });

    // Hide the next object after all the animations above are finished
    setTimeout(function() {
        $("#next-page").fadeOut();          
    }, 1500);

    // Fade in the main page after all the animations above are finished
    setTimeout(function() {
    $("#main-page").animateRotate(0, 0);
    $("#main-page").css("height", "25px");
    $("#main-page").css("width", "375px");
        $("#main-page").fadeIn();
        $("#main-page").animate({
            height: "100vh"
        }, function() {
            $(this).animate({
                width: $("body").width()
            }, function() {
                $(".maincontent").fadeIn(300);
            });
        });
    }, 1400);
});
我指的是这个链接：https://jsfiddle.net/8y801eqh/11/。当“点击这里”按钮被点击时，它必须将整个页面动画到该动画。 - user4918654
最后一个修改，伙计。能否将其制作成整个页面？然后矩形条将居中显示？ - Kimberly Wright
太棒了，伙计！谢谢！顺便问一下，你用了两个文件吗？能不能只用一个文件呢？比如index.html文件。 - user4918654
哦，如何防止第一次转换在页面加载或开头弹出？如果您刷新页面，则它会自动弹出。 - Kimberly Wright
是的。顺便问一下，伙计，你能解释一下你的代码吗？抱歉，我是初学者。 :) 我很感激。 - user4918654
显示剩余10条评论
0

jsBin演示

  • 使用CSS3关键帧动画。
  • 使用HTML覆盖元素覆盖屏幕。
  • 使用jQuery触发绑定到所述CSS3动画的CSS类。
  • 当CSS3动画精美地覆盖时，淡入淡出您的页面！

HTML：

<div class="page" id="page1">
    <h1>PAGE 1</h1>
    <a href="#">Click here</a>
</div>

<div class="page" id="page2">
    <h1>PAGE 2</h1>
    <a href="#">Click here</a>
</div>


<div id="overlay"></div> <!-- we'll animate this guy here -->

CSS：

h1{   
  font: 60px/2 Helvetica;
  color: #fff;
  font-weight: normal;
  text-align: center;
}
.page{
  position: absolute;
  overflow: hidden;
  width:  90vw;
  height: 90vh;
  top:  5vh;
  left: 5vw;
  color: white;
}
#page1{
  background: #008562;
}
#page2{
  display: none;
  background: #ff8600;
}
.page a{
  font-family: Helvetica;
  color: #fff;
  border: 2px solid #fff;
  padding: 10px 15px;
  display: block;
  text-align: center;
  margin: 0 auto;
  width: 20%;
  text-decoration: none;
}

#overlay{
  visibility: hidden;
  position: fixed;
  z-index:999;
  width:  100vw;
  height: 100vh;
  box-shadow: 0 0 0 2000px #fff;
}

#overlay.overlayAnimation{
  visibility: visible;
  animation: overlayAnimation 4s forwards;
}
@keyframes overlayAnimation {
  0% {
    width:  100vw;
    height: 100vh;
    transform: translate3d(0px, 0px, 0);
    background: transparent;
  }
  25%{
    width:  10px;
    height: 200px;
    transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0);
  }
  50%{
    width:  10px;
    height: 200px;
    transform: translate3d(calc(50vw - 5px), calc(50vh - 100px), 0) rotate(90deg);
  }
  50.1%{
    width:  200px;
    height: 10px;
    transform: translate3d(calc(50vw - 100px), calc(50vh - 5px), 0) rotate(0deg);
  }
  75%{
    width:  200px;
    height: 100vh;
    transform: translate3d(calc(50vw - 100px), 0px, 0) rotate(0deg);
  }
  100%{
    width:  100vw;
    height: 100vh;
    transform: translate3d(0px, 0px, 0) rotate(0deg);
    visibility:hidden;
  }
}

再加上一点jQuery来触发CSS3的overlayAnimation类：

var $pages = $(".page");
var $overlay = $("#overlay");

$('.page a').on("click", function(){
  if($overlay.hasClass("overlayAnimation")) return;
  $pages.fadeToggle(4000);
  $overlay.addClass("overlayAnimation").on("animationend", function(){
    $(this).removeClass("overlayAnimation");
  });
});
@KimberlyWright 这里没有任何反弹。你用的是什么旧浏览器？你试过演示吗？是的，正如你可以清楚地看到的那样，你可以点击第二页。你有一个演示，玩一下，试试看。你知道的。 - Roko C. Buljan
@KimberlyWright 目前页面是渐变切换，为了防止文本可见，您可以在过渡中简单地添加所需的背景颜色。对于相反的情况，您需要创建另一组过渡并稍微更改 jQuery。无论如何，等待 OP 的评论。 - Roko C. Buljan
你好，如何让文本淡出呢？如果只是让它弹跳的话，看起来很糟糕。另外，当你在第二页点击“点击这里”按钮时，动画会反向播放吗？ - user4918654
@SamNorton 正如我所说，您可以通过在CSS3动画关键帧中实际应用背景颜色来“淡化文本”。没有任何反弹。您使用的是哪个浏览器？ - Roko C. Buljan
我正在使用Firefox、Chrome和Safari浏览器。你能举个例子吗？ - user4918654
显示剩余2条评论
0

基本概念：

  1. 播放第一个动画，并使用$.get函数获取请求页面的内容。
  2. 当动画结束并在.done函数中从服务器获得响应时，从响应中提取主
    的内容，用当前内容替换它并播放第二个动画。
  3. 修改URL、标题和历史记录。

您可以通过设置类的属性并使用addclass函数将其添加到

中来播放动画。

不同页面使用不同js脚本可能会有问题。

也有一些可以自动化这些事情的脚本，但遗憾的是我不熟悉任何一个。

0

这不是真正的答案，但是也许这段代码对你有帮助：

$('.clickbutton').click(function(){
    $('.mainWrap').addClass('animate');
     setTimeout(function() {
         /* Code to show the page , now this is dummy code*/
        $('#main-page, #next-page').toggle();
    }, 500);
    setTimeout(function() {
        $('.mainWrap').removeClass('animate');
    }, 1000);
});
#main-page {
    height: 100%;
    width: 100%;
    background-color: #e74c3c;
    padding: 40px 0 40px 0;
}

h1{
    font-family: Helvetica;
    color: #fff;
    font-weight: normal;
    text-align: center;
}

#next-page{
    height: 100%;
    width: 100%;
    background-color: #27ae60;
    padding: 40px 0 40px 0;
    display:none;
}

a{
    font-family: Helvetica;
    color: #fff;
    border: 2px solid #fff;
    padding: 10px 15px;
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 20%;
    text-decoration: none;
    
    
    
}

.mainWrap:before, .mainWrap:after {
    background-color:yellow;
    display: block;
    
    content: '';
  height: 50vh;
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 2;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition: -webkit-transform 0.4s 0.4s;
  -moz-transition: -moz-transform 0.4s 0.4s;
  transition: transform 0.4s 0.4s;
}

.animate.mainWrap:before, .animate.mainWrap:after
{
   -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.4s 0s;
  -moz-transition: -moz-transform 0.4s 0s;
  transition: transform 0.4s 0s;   
}

.mainWrap::before {
  top: -2px;
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.mainWrap::after {
  bottom: -2px;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}

*, *::after, *::before {
  box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainWrap">
    <div id="main-page">
        <div>
            <h1>Page Transition</h1>
            <a class="clickbutton" href="javascript:void(0)"> Click Here</a>
        </div>
    </div>
    
    <div id="next-page">
        <div>
            <h1>This is the 2nd page</h1>
            <a class="clickbutton" href="javascript:void(0)"> Click Here</a>
        </div>
    </div>
</div>

在 Fiddle 中添加了：演示

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接