点击javascript:history.back()时淡出div

Question

我加载了一个fadeIn的CSS动画，但是当我点击关闭按钮时，这个块（自然地）会立即消失。有没有办法在用户单击“关闭”链接（值为javascript：history.back()）时反转动画？

演示

#showme:target {
    display: block;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left; 0;
    background: lightblue;
    -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 1s; /* Firefox < 16 */
        -ms-animation: fadein 1s; /* Internet Explorer */
         -o-animation: fadein 1s; /* Opera < 12.1 */
            animation: fadein 1s;
}

- QAW

---

你为什么要使用 javascript:history.back() 呢？ - Roko C. Buljan

长话短说，我年轻而幼稚，这个问题一直困扰着我。现在我有点意识到它有多么糟糕了。@RokoC.Buljan - QAW

Answer 1

我会用jQuery来完成动画部分，但我不确定为什么你要在history.back()中使用此动画。下面的解决方案也消除了许多额外的CSS。

HTML:

<div id="showme" style="display:none;">
    <p>I'm showing</p>
    <p><a href="#" id="close">Close</a></p>
</div>

<div id="wrapper">
    <a id="show" href="#">Show</a>
</div>

js：

$('#close').on('click', function(event) {
    event.preventDefault();
    $('#showme').fadeOut('slow');
});

$('#show').on('click', function(event) {
    event.preventDefault();
    $('#showme').fadeIn('slow');
});

css：

body {margin: 0;}

#showme {
    display: block;
    position: fixed;
    width: 100%; height: 100%;
    top: 0; left; 0;
    background: lightblue;
}

fiddle: http://jsfiddle.net/cmqg7cyf/4/

的英译中，保留了HTML格式，内容与编程有关，其中包含一个名为“fiddle”的链接，链接到http://jsfiddle.net/cmqg7cyf/4/。

- indubitablee

---

我明白了，谢谢！history.back只是一个旧系统的“残留物”，我曾经认为它会起作用。还有一个后续问题：是否有一种方法可以将此函数应用于类并打开几个不同的#ids（而不是同时打开...一个接一个地打开）？ - QAW

@QAW 这是更新后的 fiddle，包含您所需的内容：fiddle。前一个示例的解决方案是否可接受？ - indubitablee

对于这个任务，最好使用类而不是ID，这样您可以循环遍历所有的“like” div。此外，您可以使div以延迟逐个淡入显示，就像我上面链接的fiddle中所示。 - indubitablee

Answer 2

这可以使用jQuery的fadeOut函数来完成。

第一个参数是持续时间，在你编写的CSS中为一秒钟。 第二个参数是回调函数，在淡出完成后调用。

$('#showme').fadeOut(duration, function () {
    history.back();
});

这行代码应该添加在关闭按钮点击事件的事件处理程序中。

祝你好运

- Oday Fraiwan