javascript - 如何给xPage 重复控制项添加动画？

Question

这个想法是让用户登录一些，例如事件并提交表格。提交表单后，它会显示所有选择为动画列表的事件，因此元素会以链式动画形式出现。假设我必须使用重复控件。所以这是我的页面:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
    <xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.AAA = new Array();
viewScope.AAA.push("value1");
viewScope.AAA.push("value2");
viewScope.AAA.push("value3");
viewScope.AAA.push("value4");
viewScope.AAA.push("value5");
viewScope.AAA.push("value6");
viewScope.AAA.push("value7");
viewScope.AAA.push("value8");
viewScope.AAA.push("value9");}]]></xp:this.beforePageLoad>
    <xp:button value="Label" id="button1">
        <xp:eventHandler event="onclick" submit="false">
            <xp:this.script>
                <xe:dojoFadeOut node="repeatDiv" duration="100"></xe:dojoFadeOut>
            </xp:this.script>
        </xp:eventHandler>
    </xp:button>
    <xp:br></xp:br>
    <xp:br></xp:br>
    <xp:repeat id="repeat1" rows="30" value="#{javascript:viewScope.AAA}"
        indexVar="idxname" repeatControls="true" var="cname">
        <xp:div id="repeatDiv" style="background-color:rgb(128,255,128)">
            <xp:text escape="true" id="computedField1" value="#{javascript:cname}">
            </xp:text>
        </xp:div>
    </xp:repeat>
</xp:view>

通过按下按钮，我想取消隐藏重复但显示所有带有链式动画的元素。到目前为止，它只适用于重复中的第一项。有人有可行的解决方案吗？不必重复。元素/标签/计算字段的任何列表

Answer 1

也许您可以编写简单的操作脚本，但我不知道如何有效地执行此操作。相反，我使用这种类型的逻辑来直接调用 dojo.fadeOut 动画(或者我使用 jQuery/bootstrap 等价物。)

一个技巧是确保重复中的每个 div 都以您可以轻松找到的方式唯一命名。

    <?xml version="1.0" encoding="UTF-8"?>
    <xp:view
        xmlns:xp="http://www.ibm.com/xsp/core"
        xmlns:xe="http://www.ibm.com/xsp/coreex">
        <xp:this.beforePageLoad><![CDATA[#{javascript:viewScope.AAA = new Array();
    viewScope.AAA.push("value1");
    viewScope.AAA.push("value2");
    viewScope.AAA.push("value3");
    viewScope.AAA.push("value4");
    viewScope.AAA.push("value5");
    viewScope.AAA.push("value6");
    viewScope.AAA.push("value7");
    viewScope.AAA.push("value8");
    viewScope.AAA.push("value9");}]]>
</xp:this.beforePageLoad>
<xp:scriptBlock>
        <xp:this.value><![CDATA[
dojo.require("dijit.form.Button");

function fadeIt(nodeid){
    dojo.style(nodeid, "opacity", "1");
    var fadeArgs = {
            node: nodeid,
            duration: 2000
      };
      dojo.fadeOut(fadeArgs).play();
   }
 ]]></xp:this.value>
    </xp:scriptBlock>
<xp:br></xp:br>
    <xp:br></xp:br>
    <xp:repeat
        id="repeat1"
        rows="30"
        value="#{javascript:viewScope.AAA}"
        indexVar="idxname"
        repeatControls="true"
        var="cname">
        <xp:div
            style="background-color:rgb(128,255,128)">
            <xp:this.id><![CDATA[${javascript:"repeatDiv" + idxname}]]></xp:this.id>
            <xp:text
                escape="true"
                id="computedField1"
                value="#{javascript:cname}">
            </xp:text>
        </xp:div>
    </xp:repeat>
    <xp:br />
</xp:view>

然后按钮逻辑如下所示:

<xp:button
        value="Label2"
        id="button2">
        <xp:eventHandler
            event="onclick"
            submit="false">
            <xp:this.script><![CDATA[
var nodeid = "#{id:repeatDiv0}";
var hsecs = 0;
setTimeout("fadeIt('" + nodeid + "');", (hsecs*1000)+1)

nodeid = "#{id:repeatDiv1}";
hsecs += 2;
setTimeout("fadeIt('" + nodeid + "');", (hsecs*1000)+1)

nodeid = "#{id:repeatDiv2}";
hsecs += 2;
setTimeout("fadeIt('" + nodeid + "');", (hsecs*1000)+1)

//  ... and so forth...
]]></xp:this.script>
        </xp:eventHandler>
    </xp:button>

编码愉快!