html - <a href> 上的 CSS 动画/过渡

Question

我正在寻求帮助。我希望在单击其中一个导航按钮时将一些 CSS 动画应用于名为内容的 div id。

单击 时，我希望触发动画，使其从页面上消失并加载新页面。

导航栏

<ul id="nav">
    <li><a href="index.html">HOME</a></li>
    <li><a href="about-us.html">ABOUT US</a></li>
    <li><a href="clients.html">CLIENTS</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="contact.html">CONTACT US</a></li>
</ul>

内容框 HTML

<div id="content">
</div>

CSS 样式

    @-moz-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(2000px);
    }
}

@-o-keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -o-transform: translateY(2000px);
    }
}

@keyframes fadeOutDownBig {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(2000px);
    }
}

.fadeOutDownBig {
    -webkit-animation-name: fadeOutDownBig;
    -moz-animation-name: fadeOutDownBig;
    -o-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

Answer 1

您想要的是简单的术语，称为 Ajax。

您可以使用 Ajax 先向服务器发送请求以加载页面内容，如下所示:

$.ajax({
 url: "page_url"
});

然后成功将数据写入div:

$.ajax({
 url: "page_url",
 success: function (data) {
  $('#content').html(data);
});

这样内容会保留在那里，但它的内容会得到更新!

如果您也想更改 url，请使用 window.location 或 window.href。

另一个想法是首先加载所有内容。然后使用 jQuery 将 div 显示/隐藏为:

$('#nav li').click(function () {
  $('#content').hide();
  $('#newcontent').show(); // this is a new div 
                           // that you will show once click is done.
}

单击后，div 将隐藏，而具有新内容的其他 div 将显示。这样，您就不需要向服务器创建新请求，只需隐藏/显示内容即可。您也可以向页面添加更多样式。

这样，您将能够在任何元素上发生事件时更改网页上显示的内容，例如:click。您将需要使用 jQuery API 来处理这些。

注意:这只是一个简单的方法，您还有很多其他机会做同样的事情。

祝兄弟好运!干杯。

引用这些技术:

对于 Ajax:

来自 Mozilla 开发者网络:https://developer.mozilla.org/en/docs/AJAX

来自 jQuery API:http://api.jquery.com/jQuery.ajax/ (必读)

对于 jQuery:

来自 jQuery:http://www.jquery.com/

来自 jQuery API:http://api.jquery.com/