JSFiddle - React, Tailwind, and code Playground

by skane

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script type="text/x-handlebars">
    <p>{{ view.animatedProp }}</p>
</script>

CSS

section {
    background-color: green;
}

CoffeeScript

window.App = Ember.Application.create()

App.ApplicationView = Em.View.extend
    tagName: "section"
    height: 10
    width: 30

    grow: (->
        el = @get "element"
        el.style.height = @get("height") + "px"
    ).observes('height')
    
    didInsertElement: () ->
        @_super()
        el = @get "element"
        el.style.height = @get('height')+"px"
        el.style.width = @get('width')+"px"
        Ember.run.later(@, @count, 500)
        
    count: () ->
        if @get("height") < 100
            @incrementProperty 'height', 1
            Ember.run.later(@, @count, 10)
        else 
            return