Question

我最近看到了这种效果 - 我喜欢它！

虽然搜索似乎很容易，但我找不到能给我答案的东西。我确信有人可以纠正我。

基本上我是在一个简单的效果之后，一旦点击（内部）导航/页面链接，页面将淡出并返回到用户被定向到的页面。

我可以在此找到一些的东西，但我想要的附加位是在浏览器顶部有一个加载栏，它沿着页面顶部生长，直到新的页面准备就绪。

我找到了一些效果的例子：

https://grainandmortar.com
http://www.hochburg.net/de

第一个可能是我追求的更简单，更优雅的效果。

希望有人可以帮忙解决这个问题。我发现的每个示例/教程似乎都有点过于复杂或者添加了疯狂的效果。

Answer 1

您可以使用动画模板。你可以在这里找到http://git.blivesta.com/animsition/一个“演示”和一个“下载链接。

Answer 2

如果我的方式错误，请纠正我，

在链接点击事件中，附加一个javascript函数，它将使用防止默认功能，这将停止重定向过程，淡出你的body元素，然后手动触发window.location。

默认情况下，为每个页面添加不透明度0并在body标签上附加一个事件“在加载的内容上，您将手动将不透明度设置为1，并使用时髦的函数作为fadin。

如果您对真正的javascript代码感兴趣，这只是回复我的原则

祝你好运

Answer 3

我认为我用我的解决方案更新了这个，对其他任何人来说都很方便。

我决定使用pace.js插件，这对加载条非常有用。一旦页面加载，它还会向.pace-done的body元素添加一个类。 Pace会自动在页面顶部添加几个div，您可以将其设置为进度条。

所以基本上我在我的内容上设置了opacity: 0;的值，该值包含在.page div中。在我设置opacity: 1;并转换为淡入内容时，页面加载之前。还有一个后备，如果没有加载javascript，我们会覆盖样式，因此内容始终可见并且永远不会透明。

这里是css，我还包括我的pace.js加载栏样式：

/**
 * When pace.js is running we add `opacity` to the `body` element so we can fade
 * the page in with a transition once it's loaded.
 */

.page {
    opacity: 0;

    .pace-done & {
        opacity: 1;
        transition: opacity .5s ease;
    }

    .no-js & {
        opacity: 1 !important;
    }
}


/**
 * Progress bar styles.
 */

.pace {
  pointer-events: none;
  user-select: none;
}

.pace-inactive {
  display: none;
}

.pace .pace-progress {
    background: $color-primary;
    height: 4px;
    position: fixed;
    top: 0;
    right: 100%;
    width: 100%;
    z-index: 2000;  
}

总而言之，这是一个很好的小效果，效果非常好。它并不是非常重要，但我认为在重定向之前我会略微淡化页面，但我需要使用javascript。这是我使用的代码：

$(document).ready(function() {

    //$('body').css('display', 'none');
    //$('body').fadeIn(200);

    $('a:not(.page-head__toggle)').click(function() {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
    }
});

除了导航菜单切换之外，这不会定位页面上的每个链接。如果你有1000个链接，也许不是很好。您始终可以指定一个类，并且只添加添加了该类的目标链接。

希望这有助于其他人！：）

使用加载栏从页面淡入页面

3 个答案: