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

<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
                    });
                }
        });

Semnatic UI组件中的转换组顺序

1 个答案: