编辑：

Question

当用户点击某些链接时，我会在屏幕上显示一条消息。我在不透明度上使用过渡来使消息消失。

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

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

我的问题：在转换效果发生之前，是否可以重置不透明度（返回1）？

我只看到一种讨厌的方式，例如从触发不透明度转换的函数中触发一个函数，将不透明度重置为1.如下所示：

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

但这并不是很好，因为我希望只要用户点击显示此消息的其他链接就会重置不透明度。

想法？

编辑：

Fiddle

HTML：

<div id="pop_up" class="pop_up">negative</div>

<a class="something_else" href="#" onclick="show(event, this); return false;">toto</a>
<a class="something_else" href="#" onclick="show(event, this); return false;">titi</a>

CSS：

.pop_up
{
     position: absolute:
     top: -10px;
     padding: 10px;
     background-color: orange;
     opacity: 1;
     transition: opacity 1s linear;
}

JS：

function show(e, elem)
{
    msg = document.getElementById("pop_up");
    msg.style.top = elem.offsetTop;
    msg.style.left = elem.offsetLeft;
    msg.style.opacity = 0;
    msg.innerHTML = "Hug Me!";
}

Answer 1

我想我知道你想要什么。您需要每次都将过渡重置为无，然后再重新设置，并且每次都重置不透明度并隐藏/显示。使用以下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过渡，看到更好，你可以调整。重点是每次隐藏和重置弹出窗口，然后重置转换并显示以便转换再次运行。

我已经使msg成为本地可修改的（使用var声明），但也同意使用全局函数和这样的内联事件处理程序并不理想的注释。如果你想使用一个js库，如果你想要坚持使用js库，或者如果你想坚持使用纯粹的js，那么就会有所改进。

Working fiddle（仅在Firefox中测试过）。

这种技术停止了与我合作，直到我完成了实际使它工作的东西。有必要在JS代码中保留这一行：

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

如果你删除它，似乎没有重新评估元素的CSS，这意味着转换实际上没有从'none'重置为'opacity 1s ease'，这实际上触发了转换。因此，如果删除实际重置div位置的行，则不会重新评估css。在我的情况下，我最终需要元素有一个固定的位置。所以我先做：

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

紧接着是：

msg.style.bottom = 0;

第一个调用内部强制转换从无重置为其他东西，然后当然我最终将元素放在我想要的位置。

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

var tmp = elem.offsetTop;

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

转换播放后重置转换状态

编辑：

1 个答案: