语义 UI 组件中的转换组顺序答案

【问题标题】：Order of transition group in Semnatic UI components语义 UI 组件中的转换组顺序
【发布时间】：2018-02-11 00:38:44
【问题描述】：

我正在使用语义 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，有两个不同的类，如下所示，但它是在每个单个组件消失后触发的。

<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) 没有帮助。最后一个解决方案是制作一个级联功能树，这是不可取的，因为我有很多组件（不仅仅是五个）。

【问题讨论】：

标签： jquery transition semantic-ui fade semantic-ui-css

【解决方案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
                    });
                }
        });

【讨论】：