Don't limit opts.callback in transition() complete() about shuffle HOT 5 CLOSED

Yes they are limited intentionally to only trigger one layout or shrink event. The callback option is private. Use the events that are triggered instead.

from shuffle.

Events could have other subscribers, but callback is only limited to the current transition.
The transition() function is a really nice, it's takes care of css3/js transitions.
I was able to replace box content having fadeOut/fadeIn effect using transition() with callback.

• achieve this effect without callback() is not possible using transition()
• and without transition() it will be a challenge to create a custom function which is already in shuffle() and managing css3 and javascript opacity transitions.

I read your comment in the other thread that transition() intended as a private method. This is maybe because callback() exposes the this.Shuffle object. Can you keep it public and open up a safer callback()?
Eg. See code bellow, callback() could fire on opts.from == action_ or custom_ or public_ prefix values; like action_todo_list

// Fire callback() on opts.from == action_ prefixes
// Rewritten to switch;

complete = function() {
    switch (opts.from) {
        case 'layout':
            if (!self.layoutTransitionEnded) {
                self._fire(Shuffle.EventType.LAYOUT);
                opts.callback.call(self);
                self.layoutTransitionEnded = true;
            }
            break;
        case 'shrink':
            if (!self.shrinkTransitionEnded) {
                opts.callback.call(self);
                self.shrinkTransitionEnded = true;
            }
            break;
    }
    if (opts.from.indexOf('action_') === 0 && typeof opts.callback == "function") {
        // safer public callback() without exposing Shuffle object
        // and only give back $this element
        opts.callback.call(opts.$this);
    }
}

from shuffle.

Just as an app update, my workable block-content-replace with fadeIn/out effect looks like this:

$grid.shuffle.transition({
    from: 'action_fadeOut',
    $this: $current.addClass(newBlockClasses),
    opacity: 0,
    callback: function() {
        $grid.shuffle.transition({
            from: 'action_fadeIn',
            // $this: $current.html($newblock.html()), 
           // we got back opts.$this
            $this: this.html($newblock.html()),
            opacity: 1,
            callback: $grid.shuffle.layout()
        });
    }
})

Example:
http://plnkr.co/fIzWQ5rehi8u389cSdbt

from shuffle.

The transition method isn't meant to be a utility function for other uses. If you require the ability to animate opacity and other properties with css transitions, you should look into jQuery Transit

from shuffle.

I accept your decision.
Thank you for the nice shuffle plugin, really nice work!

from shuffle.