Question

我制作了几个html文件。在主页面上，我刚写下了一些像这样的代码

  <a href="new.html>
    <img src="img/button" id="buttonid">     
  </a>

当我点击按钮时，我看到网络启动了new.html活动。当我打开“new.html”时，我想要进行一些平滑的页面转换。我通过互联网搜索，发现大多数页面转换是通过将其他类放入格式来完成的。无论如何，有什么方法可以在使用??

时实现页面转换

Answer 1

进行某些转换的唯一方法是使用jjery Mobile在示例中使用ajax（查看http://demos.jquerymobile.com/1.0a4/docs/pages/docs-transitions.html）。

Answer 2

有一种方法来欺骗它，我在这里使用Jquery易于使用。在你的css中设置body标签显示none，然后在文档加载时使用jquery设置它淡入，我已经在3秒内完成效果并做了警告等等。用它来捣乱...

＆＃13;

$( "body" ).fadeIn( 3000, function() {
    alert('Billys spoofed slow sort of fade in');
	$('body').css('color','red');
  });

＆＃13;

body{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello from fade in</h1>

＆＃13;

Answer 3

您必须劫持<a>标记并通过javascript处理其行为。

FadeOut部分

首先给它一个空目标：

 <a href="#"> ... </a>

所以当你点击它时，没有任何反应。然后，使用自定义属性存储您在单击此标记时要加载的URL：

<a href="#" data-url="new.html"> ... </a>

然后添加一些允许javascript / jQuery定位链接的类：

<a href="#" data-url="new.html" class="smoothLink"> ... </a>

在你的javascript中，定位你的smoothLinks并写一个延迟的动作（在这里使用jQuery）：

$("a.smoothLink").click( function(e){
    $("body").fadeOut(function(){ // This will fade out your entire page in about half a second. When it's done, execute the callback function
             window.location = e.currentTarget.attributes['data-url'].value;
     });
}

但是，出于性能原因，我强烈建议您更喜欢CSS3不透明度动画（不透明度1 - > 0 - > 1），因为与jQuery的淡入淡出功能不同，它们的硬件加速

以下是该怎么做：

（JS）

 $("a.smoothLink").click( function(e){
        $("body").addClass("fadeOut"); // anything with the "fadeOut" class will become transparent in 1s in our CSS

        setTimeout( function(){ // wait 1s, then change URL
            window.location = e.currentTarget.attributes['data-url'].value;
        }, 1000)
 }

（CSS）

.fadeOut {
   opacity: 0;
   transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;
}

淡出部分

加载新页面后，必须为空白，然后淡入。从使整个身体透明开始：

（CSS）

body{
    opacity :0;
}

然后，将其淡入。

使用jQuery方法：

$("body").fadeIn()

使用CSS3方法：

在你的HTML中，给身体一个＆＃34; fadeIn＆＃34; class：

（HTML）

<body class="fadeIn">

回到你的CSS，用＆＃34; fadeIn＆＃34;写一个淡入淡出的指令class：

（CSS）

.fadeIn {
     opacity: 1;
     transition: opacity 1s ease-in-out;
     -moz-transition: opacity 1s ease-in-out;
     -webkit-transition: opacity 1s ease-in-out;
}

因此，在页面加载时，您的身体将在1秒内逐渐显现。我必须在未经测试的情况下说这个，但应该是一个很好的提示：）

编辑 - ** **带有白色叠加层的简单解决方案

只需用全白色覆盖覆盖整个页面，即可随意制作透明或不透明：

（HTML）

<div id="overlay"></div>

（CSS）

div#overlay{
    position: absolute;
    z-index:999;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background:white;
    pointer-events:none; // so you can click through

    opacity : 1;
    transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;
}

（JS）

$("div#overlay").css("opacity",0); // will fade out the overlay on page load

$("a.smoothLink").click( function(e){
                $("div#overlay").css("opacity",1);

                setTimeout( function(){ // wait 1s, then change URL
                    window.location = e.currentTarget.attributes['data-url'].value;
                }, 1000)
}

有什么方法可以在使用<a href="">?</a>时实现页面转换

3 个答案: