Semnatic UI 组件中的过渡组顺序

Question

我正在使用语义 UI 转换 (css,js)，并且有一些 html 对象要淡入：

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding1 transition">
<div id="div3" class="fadding1 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

然后我可以通过从 jQuery 脚本调用按顺序淡化它们：

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400
        });

因此，它们开始依次从 div1 淡入到 div5，一个接一个。 现在，假设我希望它们按照 div1、div4、div5、div2 和 div3。 我尝试了 onComplete，有两个不同的 类，如下所示， 但是 它是在 each[=42= 之后触发的] 单个组件消失。

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding2 transition">
<div id="div3" class="fadding2 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

和jQuery脚本：

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400,
            onComplete: function() {
                $('.fadding2').transition({
                    animation: 'fade',
                    duration: 1500,
                    interval: 400
                });
        });

所以使 类 (1,4,5) 和 (2,3) 不同并没有帮助。最后一个解决方案是制作一个级联功能树，这是不可取的，因为我有很多组件（不仅仅是五个）。

Answer 1

这可能是最好的解决方法。使用第一个衰落组中最后一项的 ID。在 onComplete 函数中，检查它是否引用该 id，然后第二个衰落组开始。

<div id="div1" class="fadding1 transition">
<div id="div2" class="fadding2 transition">
<div id="div3" class="fadding2 transition">
<div id="div4" class="fadding1 transition">
<div id="div5" class="fadding1 transition">

核对id，开始第二次淡出动作：

$('.fadding1').transition({
            animation: 'fade',
            duration: 1500,
            interval: 400,
            onComplete: function() {
                if(this.id=="div5"){
                    $('.fadding2').transition({
                        animation: 'fade',
                        duration: 1500,
                        interval: 400
                    });
                }
        });