Question

我正在建立一个允许你更新SQL表的网站，我想在点击一个按钮时添加一些反馈。我创建了一个隐形按钮（opacity = 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;
    }

这样可以正常工作，但它只能工作一次。从这里我不能让动画第二次播放。我已经尝试将课程改回“隐形”然后“invisible_anim”，没有运气。我也不能使用JQuery或Webkit。我想知道是否有一些标志你可以设置按钮而不实际点击它所以我可以在需要时重置课程？甚至某种方式来解决我的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中

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/）详细说明了您可能遇到的一些问题。

Answer 2

您是否考虑过使用CSS属性“ transition”？ JavaScript具有一个名为“ transitionend”的事件侦听器，可以在转换结束时触发，您可以使用它重置按钮。

首先设置ID为invis的警报按钮区域。

CSS：

#invis {    
    opacity: 1;
    transition: opacity 3s;
}

然后使用JavaScript生成按钮及其内容，它们将以不透明度1出现，然后从transition变为不透明度0。完成动画后，您的addEventListener将触发，移除按钮并重置下一次触发的不透明度。

JavaScript：

var invis = getElementByID("invis");

function fade() {
    var button = document.createElement("button");
    invis.appendChild(button);
    invis.style.opacity = ("0");

    invis.addEventListener("transitionend", function(){
        invis.removeChild(button);
        invis.style.opacity = ("1");
    });
}

您可以为用户“点击”将fade()函数添加到EventListener中。

这是我第一次在StackOverflow上回答，希望对您有所帮助！

Answer 3

你需要开始透明然后显示然后隐藏：

<?xml version='1.0' encoding='UTF-8' ?>
<ui:component
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:cc="http://xmlns.jcp.org/jsf/composite"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:a="http://xmlns.jcp.org/jsf/passthrough"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    >
    <cc:interface>
        <cc:facet name="someFacet" required="true"/>
    </cc:interface>
    <cc:implementation>
        <h:commandLink value="this link should not work (not in a form)"/><br/>
        <h:form>
            <h:commandLink value="this link works as expected (within form, but not in facet)"/><br/>
            <cc:renderFacet name="someFacet"/>
        </h:form>
    </cc:implementation>
</ui:component>

然后只需添加您的课程（在3000ms时间段后删除）

CSS多次淡出

3 个答案: