JSFiddle - React, Tailwind, and code Playground

by mehulkar

HTML

<script src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-4daa46780df82d754b1fa072a1259899501ac360.js"></script>
<script type="text/x-handlebars">
    <div class="current">{{view App.RotatingView}}</div>
</script>

CSS

.current {
    height: 30px;
    background-color: red;
}
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  } 100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  -moz-animation-name: fadeOutUp;
  -o-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

JavaScript

App = Ember.Application.create();

App.RotatingView = Ember.ContainerView.extend({
  templateString: null,
  views: ['a','b','c'],
  
  init: function() {
    this._super();
    var string;
    string = this._getNextTemplate();
    this.set('templateString', string);
    var _this = this;
    setInterval(function() {
      var string = _this._getNextTemplate();
        _this.set('templateString', string);
      _this.set('currentView', App.RotatingViewTemplate.create({template: Ember.Handlebars.compile(string)}));
      
    }, 1000);
  },
  
  _getNextTemplate: function() {
    var currentTemplateIndex, length, views;
    views = this.get('views');
    length = views.length;
    currentTemplateIndex = views.indexOf(this.get('templateString'));
    if ((currentTemplateIndex + 1) === length) {
      return views[0];
    } else {
      return views[currentTemplateIndex + 1];
    }
  }
});


App.RotatingViewTemplate = Ember.View.extend({
  didInsertElement: function() {
    return this.$().addClass('fadeInUp');
  },
  willDestroyElement: function() {
    this.$().removeClass('fadeInUp');
    return this.$().addClass('fadeOutUp');
  }
});