使用 bootstrap 转到另一个页面时如何创建移动动画？

Question

所以我建立了我的网站运行但我想在转到另一个页面时添加一种移动动画或一些加载动画的东西，所以它看起来不像是刷新页面.

我只知道HTML和一些CSS，别的什么都不打算学JS和PHP。谢谢！

（我使用 Bootstrap 和一个名为 Paper 的主题，它看起来像 material 设计，来自 bootswatch.com）

Answer 1

我想你问的是动态页面加载。所以这是通过使用 ajax 来实现的。有了这个你可以显示多个页面而不刷新你也可以添加自己的动画来显示一些加载效果这些是使用此效果的链接..

http://www.reverbnation.com/

http://clicklinks.be/tutorials/javascript/prototype/page-loading/demo/index.html

Answer 2

首先，只有 HTML 和 CSS 很难做到这一点。您至少需要了解 JS。您可以使用 AJAX，通过调用第二页的内容并将其加载到当前页面，或者如果您对 AJAX 不满意，您可以使用 javascript 进行简单的修改].您可以禁用第二页的 link，当单击第二页 link 时，您可以设置第一页离开的动画。然后，在页面加载（第 2 页）时，您可以执行进入动画。如果你能提供一个jsfiddle，我们会更容易提供帮助。

Answer 3

我不会说这是一个广泛的问题，但我会说它需要一个 js fiddle 或代码示例..

问题是网站是以 101 种方式构建的，所以即使有人为您提供代码。如果不了解 javascript，您仍然很可能需要有人修改它以适应您的网站，或者一路上的几个问题。

至于 javascript，为了让您的生活更轻松...从像 jQuery 这样的库开始...这将暂时节省您的时间和精力..

至于过程..嗯，它可以变化... 假设您有一个标准页面，它有一个 DIV 元素，其中包含除 header/menu/footer.

之外的所有内容

你会做的是...

POST 请求您的 PHP 网络服务器以获取所请求页面的副本（这只是内容.. 没有 header/menu/footer）
Hide/fade/move 具有当前页面内容的当前 DIV 元素
一旦它是 moved/changed.. 你会用你的 HTML 替换 HTML 从 POST
Show/fade/move DIV 元素回到它开始的地方....

你的大功告成...听起来很简单，但会有所不同...

function loadPage(sPage) {
    $(".site-heading > h1").html("Loading");
    $(".site-heading > span").html("Please wait while we fetch your page");

    $("#pageContents").fadeTo(200, 0.5);
    $(".intro-header").fadeTo(200, 0.5, function(){
        $.post("index.php", { ajax: "page", page:sPage }).done(function( data ) {
            var oJSON = $.parseJSON(data);
            if (typeof oJSON.success != 'undefined') {
                if (oJSON.success==true) {
                    $(".intro-header").css({"background-image":"url('images/" + sPage + "-bg.jpg')"});
                    $("#pageContents").html(oJSON.page);
                    $(".site-heading > h1").html(oJSON.header_text);
                    $(".site-heading > span").html(oJSON.header_subtext);
                    $(".intro-header").fadeTo(200, 1);
                    $("#pageContents").fadeTo(200, 1);
                }
            }
            //alert( "Data Loaded: " + data );
        });         
    });     
}

以上是一些旧代码的 JS 函数，它执行上述操作..

if (isset($_REQUEST['ajax']) && $_REQUEST['ajax']=="page" && isset($_REQUEST['page'])) {
    $sPage = "engine/pages/" . $_REQUEST['page'] . "/index.php";
    $oRet = array();
    $oRet['success'] = false;
    $oRet['page'] = false;

    if (file_exists($sPage)) {
        $sPageSettings = "engine/pages/" . $_REQUEST['page'] . "/settings.php";
        if (file_exists($sPageSettings)) {
            require $sPageSettings;
        }

        $oRet['success'] = true;
        $oRet['page'] = file_get_contents($sPage);
        $oRet['header_text'] = $oPage['header_text'];
        $oRet['header_subtext'] = $oPage['header_subtext'];
    }
    echo json_encode($oRet);
    exit;
}

是响应请求并将HTML发送回javascript的PHP代码。

使用 bootstrap 转到另一个页面时如何创建移动动画？

How do I create a moving animations when going to another page with bootstrap?

html

css

animation

twitter-bootstrap