Question

所以我正在制作一个点击游戏，并且有点卡住了。当你获得成就时，我想要一个像cookieClicker这样的弹出窗口。它弹出并告诉你发生了什么，你可以点击x或者它会在几秒后消失。

我尝试使用纯javascript和CSS制作一些东西无济于事，它会很好地消失，但不会自动消失。

那么，如果制作/显示X元素，那么如何在3秒后消失？

此外，如果重要，元素将由javascript函数创建，并且可能同时创建倍数。

P.S。我尝试搜索并发现了一些关于javascript中自动淡化的内容，但其中没有任何内容似乎也可以正常工作。

编辑：在尝试查看cookieclicker源并再次玩游戏后，它似乎甚至没有这个功能。我可以比较的最接近的事情是，当你在网站上添加一些东西到你的购物车时，它会提醒你项目被添加然后消失。

Answer 1

以下是一种使用Javascript触发CSS转换的方法：

var button = document.getElementsByTagName('button')[0];
var div = document.getElementsByTagName('div')[0];

function autoFader() {

if (window.getComputedStyle(div).getPropertyValue('display') === 'none') {

    div.style.display = 'block';

        setTimeout(function(){
            div.style.opacity = '0';
        },10);

        setTimeout(function(){
            div.removeAttribute('style');
        },4010);

    }
}

button.addEventListener('click',autoFader,false);

div {
display: none;
width: 200px;
height: 100px;
margin: 20px auto;
padding: 6px;
font-size: 20px;
color: rgb(255,255,255);
text-align: center;
border: 3px solid rgb(127,0,0);
background-color: rgb(255,0,0);
opacity: 1;
transition: opacity 3s linear 1s;
}

<button type="button">Click Me</button>

<div>
<p>Hi, I'm an auto-fading pop-up.</p>
</div>

Answer 2

因此，您的openPopup函数可能如下所示：

function openPopup(/* options here */) { const popup = actuallyOpenPopup(); waitSomeTimeAndCloseIfNotClosedYet(popup); }

其中第二个函数应该采用弹出式实例（可能有.close方法，或者解除）并开始超时。您需要保持该超时，因此如果关闭被调用，则需要取消它。

这样的事情：

function waitSomeTimeAndCloseIfNotClosedYet(popup) {
    const originalClose = popup.close;

    /* monkey patching, decorating, 
       separate method - whatever you prefer */
    popup.close = function () {
        clearTimeout(this.timeout);
        originalClose.call(this);
    };

    popup.timeout = setTimeout(() => popup.close(), 3000);
}

因此，如果手动关闭 - 它不会被调用两次，如果没有，将启动超时并自动关闭。

通过CSS，您只能实现可见的关闭，但不能删除节点。（谷歌过渡能见度，淡出模态等）。

希望这有帮助！

将使元素自动消失的JQuery或Javascript

2 个答案: