JSFiddle - React, Tailwind, and code Playground

by robak86

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">    
    <ol>
        <li {{action connectViewA}}> ConnectViewA </li>
        <li {{action connectViewB}}> ConnectViewB </li>
        <li {{action connectViewC}}> ConnectViewC </li>
    </ol>
    <hr>
    
    {{outlet shaa}}
</script>

JavaScript

MyApp = Ember.Application.create({
    autoinit: false
});

AnimationHelper = Ember.Object.extend({
    isPreviousViewFadedOut:false,
    nextViewToFadeIn:null,
    triggerManually: true,
    setNextViewToFadeIn:function (view) {
        if (this.nextViewToFadeIn) {
            if (this.hasObserverFor('isPreviousViewFadedOut')) {
                this.removeObserver('isPreviousViewFadedOut', this.nextViewToFadeIn, 'fadeInCallback');
            }
        }
        this.nextViewToFadeIn = view;
        this.addObserver('isPreviousViewFadedOut', this.nextViewToFadeIn, 'fadeInCallback');
    }
});

AnimatedView = Ember.View.extend({
    didInsertElement:function () {
        this.$().hide();

        if (AnimatedView.aHelper.get('triggerManually')) {
            AnimatedView.aHelper.set('isPreviousViewFadedOut', true);
            this.fadeInCallback();

            //next time we don't want call fadeInCallback manually
            AnimatedView.aHelper.set('triggerManually', false);
        } else {
            AnimatedView.aHelper.setNextViewToFadeIn(this);
        }
    },

    fadeInCallback:function () {
        if (AnimatedView.aHelper.get('isPreviousViewFadedOut')) {
            this.$().fadeIn(500);
        }
    },

    willDestroyElement:function () {
        AnimatedView.aHelper.set('isPreviousViewFadedOut', false);
        var clone = this.$().clone();
        this.$().replaceWith(clone);

        var that = this;
        clone.fadeOut(500, function () {
            $(this).remove();
            
            if (AnimatedView.aHelper.nextViewToFadeIn == that) {
                AnimatedView.aHelper.removeObserver('isPreviousViewFadedOut',
                    AnimatedView.aHelper.nextViewToFadeIn, 'fadeInCallback');
                
            } else {
                AnimatedView.aHelper.set('isPreviousViewFadedOut', true);
            }
        });
    }
})

AnimatedView.reopenClass({
    aHelper:new AnimationHelper()
})

MyApp.ViewAView =...