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

Question

我已经加载了一个 衰落在 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;
}

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;
}

小提琴：http://jsfiddle.net/cmqg7cyf/4/

Answer 2

这可以使用jQuery淡出函数来完成。

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

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

此行代码应添加到关闭按钮单击事件的事件处理程序上。

祝你好运