使用<href>时，是否有任何方法可以实现页面过渡

are there any methods to implement page transitions when using <a href>?

本文关键字：实现 方法 href 使用 是否 任何      更新时间：2023-09-26

我做了几个HTML文件。 在主页上，我只是写下了一些这样的代码 

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

当我单击该按钮时，我看到网络开始新的.html活动。我想在打开"new.html"时放置一些平滑的页面过渡。 我通过互联网搜索，发现大多数页面过渡都是通过将其他类放入格式来完成的。 无论如何，使用时是否可以实现页面过渡的任何方法？

你必须劫持你的<a>标签并通过javascript处理它的行为。

淡出部分

首先给它一个空的目标：

 <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)
 }

（中信）

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

淡入部分

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

（中信）

body{
    opacity :0;
}

然后，淡入。

使用 jQuery 方法：

$("body").fadeIn()

使用 CSS3 方法：

在你的HTML中，给主体一个"fadeIn"类：

（网页）

<body class="fadeIn">

回到你的CSS，用"fadeIn"类写一条淡入淡出的指令：

（中信）

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

因此，在页面加载时，您的身体将在 1 秒内逐渐可见。我不得不在未经测试的情况下说这句话，但应该是一个很好的提示:)

编辑-****带有白色覆盖层的更简单的解决方案

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

（网页）

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

（中信）

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)
}

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

有一种方法可以欺骗它，我在这里使用 Jquery 是为了方便使用。在您的 CSS 中将 body 标签设置为显示 none 然后在文档加载时使用 jquery 将其设置为淡入，我已经在 3 秒内完成了效果并做了警报等。

$( "body" ).fadeIn( 3000, function() {
    alert('Billys spoofed slow sort of fade in');
	$('body').css('color','red');
  });
body{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Hello from fade in</h1>

相关文章：