Order of transition group in Semnatic UI components

Question

I am using Semantic UI transition (css,js), and there are some html objects to fade in:

<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">

Then I can fade them in sequential order by calling from jQuery script:

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

So, they start fading in from div1 to div5 in order, one after each other. Now, lets say I want them to fade in this order div1, div4, div5, div2 and div3. I tried onComplete, with two different classes like below, but it is triggered after each individual component fades.

<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">

and jQuery script:

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

So making different classes (1,4,5) and (2,3) is not helping. The last solution is making a cascading functional tree, which is not desirable since I have plenty of components (not only five).

score 0 · Accepted Answer · answered Feb 10 '18 at 16:38

This could be the best workaround. Use the id of the last item in the first fading group. in the onComplete function, check if it refers to that id, then second fading group starts.

<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">

Checking the id, and starting the second fading action:

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

Order of transition group in Semnatic UI components

1 Answers1