几乎相同页面之间的 CSS 过渡

Question

我有两个页面，index.html 和 about.html，都使用相同的 CSS 样式。

在我的网站上，其中两个链接是关于和主页。这两个页面之间的唯一区别是显示的段落文本（导航和页脚相同）。

当从主页单击关于链接或反之亦然时，如何为页面/文本创建过渡？

我正在寻找一个默认的缓动过渡，假设我给段落一个 id = "target"

在我的 css 文件中，我会做类似的事情

#target {
    transition: 1s;
}

我不知道我需要指定什么 css 属性。

Answer 1

这需要一些 JavaScript 或 JQuery。

HTML

<a id="homeLink">Home</a>
<a id="aboutLink">About</a>

<p id="targetHome">This is the home Paragraph...</p>
<p id="targetAbout" class="hidden">This is the about Paragraph...</p>

JS

$(document).on("click", "#aboutLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetHome:visible").hide("fade", 300, function(){
       $("#targetAbout:hidden").show("fade", 300); //Show About Paragraph if hidden
    });
});

$(document).on("click", "#homeLink", function(e){
    e.preventDefault(); //Prevent the <a> element from redirecting
    $("#targetAbout:visible").hide("fade", 300, function(){
       $("#targetHome:hidden").show("fade", 300); //Show Home Paragraph if hidden
    });
});