javascript - CSS 多次淡出

Question

我正在制作一个可以让您更新 SQL 表的网站，我想在单击按钮时添加某种反馈。我做了一个不可见的按钮(不透明度=0)，它位于每行的右侧作为状态。我制作了这个 JS fade() 函数来将不透明度设置为 1，然后慢慢将其恢复为 0，因此弹出一条消息然后消失。

 function fade () {
    var invis = document.getElementById("invis".concat(num.toString()));
        if(invis.style.opacity > .990) {
            invis.style.opacity = (invis.style.opacity) - .001;
            setTimeout(fade, 50);
        } else if(invis.style.opacity > 0) {
            invis.style.opacity = (invis.style.opacity) - .05;
            setTimeout(fade, 50);
        }
    }

问题是，由于网页是单线程的，任何其他操作都会中断动画并留下半淡化状态。所以这不好。所以现在我正在尝试设置不可见按钮以在更新新行时更改类。新类看起来像这样:

.invisible_anim {
    ...
    opacity: 0;
    animation:trans 3000ms;
}
@keyframes trans {
    0% {
       opacity: 1;
    } 
    50% {
        opacity: 1;
    }

这工作正常，除了它只工作一次。从这里我无法让动画再次播放。我曾尝试将类(class)改回“隐形”，然后是“invisible_anim”，但没有成功。我也不能使用 JQuery 或 Webkit。我想知道是否有一些标志可以为按钮设置而无需实际单击它，以便我可以在需要时重置类(class)？或者甚至是某种线程化我的 JS 函数的方法，这样我就可以坚持下去。

Answer 1

如果您想多次播放动画(请参阅此处的文档:https://developer.mozilla.org/en-US/docs/Web/CSS/animation)，如果您只想播放两次。

所以这样:

.invisible_anim {
...
opacity: 0;
animation:trans 3000ms;
}
@keyframes trans {
0% {
   opacity: 1;
} 
50% {
    opacity: 1;
}

会转向

.invisible_anim {
...
opacity: 0;
animation:trans 3s 2 ;
}

@keyframes trans {
0% {
   opacity: 1;
} 
50% {
    opacity: 1;
}

编辑:显然要求与我想象的不同。相反，解决方案似乎是关闭位于 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations 的动画事件。然后当动画完成时做你需要做的:所以在 JS-only

var e = document.getElementById("watchme");
e.addEventListener("animationend", listener, false);

function listener(){
   //do what you need to do here
}

请注意，这是因为大多数浏览器都有在不同时间触发的不同“animationend”事件。所以肯定需要在不同的浏览器中进行测试，以确保动画事件在正确的时间触发。 ( https://css-tricks.com/controlling-css-animations-transitions-javascript/) 上有一篇帖子详细介绍了您可能会遇到的一些问题。