Question

当有人点击链接时，我想要发生三件事：

1）内容淡出，只留下背景图像

2）背景图片淡入超链接后面页面的背景图像

3）加载新的背景图像后，继续执行超链接事件，并带上用户到新页面（新内容将淡入其中）。

我认为这会产生很好的连续性效果，但是我无法获取链接背景图片的网址。我可以使用.load来更改a的内容，但是无法找到为CSS属性执行此操作的方法。

PS：忽略{％tags％}：我正在使用Django模板标签来引用URL，这些工作正常（...现在......）

{% load staticfiles %}

<html>
    <head>
        {% block title %}<title>Title Goes Here</title>{% endblock %}
        <link rel='stylesheet' type='text/css' href='{% static 'css/style.css' %}'>
        <style>
            body{
                background: url("{% block bgImage %} {% static 'images/backgroundimages/Cactus.JPG' %} {% endblock %}");
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
    <script src='{% static 'js/jquery.js' %}'></script>
    <script>
        $(document).ready(function(){
            $('body').css('display', 'none');
            $('body').fadeIn(1000);
            $(".navLink").click(function(event){
                event.preventDefault();              
                var targetLink = $(this).attr('href');
                ***Do something to get the URL of the background image of the page pointed at by targetLink***

            });
        });
    </script>
</head>
<body>
    {% block nav %}
        <nav>
            <a href='{% url 'home' %}' class='navLink'>Home</a>
            <a href='{% url 'about' %}' class='navLink'>About</a>
            <a href='{% url 'services:services' %}' class='navLink'>Services</a>
            <a href='{% url 'portfolio:portfolio' %}'class='navLink'>Portfolio</a>
            <a href='{% url 'projects:projects' %}' class='navLink'>Projects</a>
            <a href='{% url 'contact' %}' class='navLink'>Contact</a>
        </nav>
    {% endblock %}
        <div id='wrapper'>
           {% block content %}
              Content Goes Here
            {% endblock %}
        </div>
</body>

提前感谢您的指导！

Answer 1

我不认为你可以在不使用AJAX和history.PushState的情况下顺利过渡。但只是为了它... ...

首先，您应该将背景图像放在全局style.css中，并使用与页面关联的类。并在css中添加转换而不是jQuery。

CSS

body {
    -webkit-transition: background-image 1s ease-in-out;
       -moz-transition: background-image 1s ease-in-out;       
            transition: background-image 1s ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
            transition-delay: 1s;
}

.home-page {
    background-image: url(bg-home.jpg);
}

.about-page {
    background-image: url(bg-about.jpg);
}

.content {
    opacity: 0;
    -webkit-transition: opacity 1s linear;
       -moz-transition: opacity 1s linear;
            transition: opacity 1s linear;
 }

.fade-in {
    opacity: 1;
 }

然后使用jQuery添加和删除类以启动转换并处理导航页面。

的jQuery

$(function () {
    $body = $("body");
    $content = $(".content");
    setTimeout(function () {
        $content.addClass("fade-in");
    }, 200);

    function onTransitionEnd(href) {
        $content.on('webkitTransitionEnd otransitionend oTransitionEnd transitionend',
            function (event) {
                event.stopPropagation();
            });
        $body.on('webkitTransitionEnd otransitionend oTransitionEnd transitionend',
            function () {
                window.location = href;
            });
    };

    function pageTransition(toPageLink, toPageClass) {
        event.preventDefault();
        $body.removeClass().addClass(toPageClass);
        $content.removeClass("fade-in");
        onTransitionEnd(toPageLink);
    };

    $(".home-link").on("click", function (event) {     
        pageTransition($(this).attr('href'), 'home-page')
    });

    $(".about-link").on("click", function (event) {
        pageTransition($(this).attr('href'), 'about-page')
    })
});

然后页面的标记将在正文和链接上有类。

HTML

主页示例

<body class="home-page">
    <nav>
        <a href="home.html" class="home-link">Home</a>
        <a href="about.html" class="about-link">About</a></nav>
    <div class="content">
        Content goes here
    </div>
</body>

关于页面示例

<body class="about-page">
    <nav>
        <a href="home.html" class="home-link">Home</a>
        <a href="about.html" class="about-link">About</a></nav>
    <div class="content">
        Content goes here
    </div>
</body>

否则，您可以尝试使用ajax获取内容，转换和更新网址的此插件：http://weblinc.github.io/jquery.smoothState.js/

单击时加载另一个页面的CSS属性

1 个答案:

CSS

的jQuery

HTML