在页面加载之间转换答案

【问题标题】：Transitioning between pageloads在页面加载之间转换
【发布时间】：2015-04-20 18:27:48
【问题描述】：

我想在页面加载（如幻灯片、旋转、淡入淡出等）之间设置过渡效果。我正在尝试使用以下代码来完成此操作，但它不起作用。有什么想法吗？

$("asp:HyperLink.smoothlink").click(function (e) {
    $("body").addclass("fadeout");

    setTimeOut(function() {
        window.location = e.currentTarget.attributes['data-url'].value;
    },1000);
}

CSS

.fadeout
{
    opacity:0;
    transition :opacity 1s ease-in-out;
    -moz-transition-opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
}

【问题讨论】：

首先你有一个错字，它是setTimeout()，而不是setTimeOut()

标签： javascript jquery asp.net .net

【解决方案1】：

据我了解，您正在尝试在单击特定链接时向当前页面添加动画。您似乎在 .NET 环境中工作，我对它的 WebControls 不太熟悉，但是有几个错误很明显：

您没有使用正确的选择器字符串 - asp:HyperLink.smoothlink。尝试改用a.smoothlink。
JavaScript 区分大小写，因此 addclass 和 'setTimeOutare causing an error. Try using 'addClass 和 setTimeout 改为。
您可能还需要使用href 属性而不是data-url，但这实际上取决于.Net 控件生成的内容。

这是我认为您正在尝试做的一个工作示例：

HTML：

<a href="http://stackoverflow.com" class="smoothlink">example link</a>

CSS：

.fadeout {
    opacity:0;
    transition :opacity 1s ease-in-out;
    -moz-transition-opacity 1s ease-in-out;
    -webkit-transition:opacity 1s ease-in-out;
}

JavaScript：

$(document).ready(function () {
    $("a.smoothlink").click(function (event) {
        event.stopPropagation();
        $("body").addClass("fadeout");
        setTimeout(function () {
            window.location =  $(event.currentTarget).attr('href');
        }, 1000);
    });
});

【讨论】：