Javascript 播放转换后重置转换状态

当用户单击某些链接时，我会在屏幕上显示一条消息。我在不透明度上使用了一个过渡，以使信息逐渐消失

问题是，当用户单击下一个链接（应该显示消息）时，元素的不透明度设置为0，因此不可见

不透明度转换由JavaScript函数触发

我的问题：在过渡效果发生之前，是否可以将不透明度重置回1

我只看到一种令人讨厌的方法，比如从触发不透明度转换的函数中触发一个函数，将不透明度重置回1。比如：

setTimeout(function(){elem.style.opacity = 1;)}, 3000);

但这不是很好，因为我希望在用户单击显示此消息的另一个链接时立即重置不透明度

想法

编辑： HTML:

JS:

---

我想我知道你想要什么。您需要将转换重置为“无”，然后每次重置一次，还需要每次重置不透明度并隐藏/显示。使用以下CSS：

.pop_up
{
    position: absolute;
    display: none;
    padding: 10px;
    background-color: orange;
}

以及以下javascript：

function show(e, elem) {
    var msg = document.getElementById("pop_up");   
    msg.style.transition = 'none';
    msg.style.display = 'none';
    msg.style.opacity = 100;
    msg.innerHTML = "Hug Me!";    
    msg.style.display = 'block';
    msg.style.top = '' + elem.offsetTop + 'px';
    msg.style.left = '' + elem.offsetLeft + 'px';
    msg.style.transition = 'opacity 2s linear';    
    msg.style.opacity = 0;        
}

我想你得到了你想要的效果。我已经改为2s过渡，以便更好地观察，您可以进行调整。关键是每次隐藏并重置弹出窗口，然后重置转换并显示，以便再次运行转换

我使用vardeclaration将msg设置为局部变量，但也同意这样的评论，即使用全局函数和内联事件处理程序并不理想。如果你想使用js库，或者如果你想坚持使用纯js库，那么就改进这个depnd

仅在Firefox中测试

这项技术在我看来已经不起作用了，直到我完成了真正让它起作用的事情。有必要在JS代码中保留这一行：

msg.style.bottom = elem.offsetTop + 'px';

如果删除它，元素的CSS似乎没有重新计算，这意味着转换实际上没有从“无”重置为“不透明度1s-ease”，例如，这实际上触发了转换。因此，如果删除实际重置div位置的行，css将不会重新计算。在我的例子中，我最终需要元素有一个固定的位置。所以我首先要做的是：

msg.style.bottom = elem.offsetTop + 'px';

紧接着：

msg.style.bottom = 0;

第一个调用在内部强制将转换从“无”重置为其他内容，然后当然我最终将元素定位到我想要的位置

请注意，第一行也可以是：

var tmp = elem.offsetTop;

---

这里重要的是更改元素的状态，以便浏览器引擎对其CSS进行内部重新评估。

只需在事件处理程序中重置不透明度。听起来是个好主意，但请您稍微开发一下。我会试着自己找出答案，但是一些代码会对我有很大帮助。你能为你的代码添加一个简单的版本吗？也许做一把小提琴？更容易理解和解释与一个example@Adam：尝试创建小提琴，但无法使其工作。刚刚添加了代码。它很小。@18490我把小提琴修好了。问题是show函数是在load事件处理程序中声明的，因此不是全局函数。此外，应该避免添加内联事件处理程序和全局变量。你看得非常精彩。你救了我一天。非常感谢你。这很令人沮丧，因为我以前试过，但没能让它工作，所以一定是按错误的顺序做的。这很酷。我还尝试了Oriol建议的addEventListener和transitionEnd，但它只能在动画完成后重置值。所以并不理想。又是Thx。

msg.style.bottom = elem.offsetTop + 'px';

msg.style.bottom = 0;

var tmp = elem.offsetTop;