Ember.js - Fading in an if statement

Question

I want to smoothly fade in an error for a field, and I'm having some issues figuring out the flow for this for Ember.js. At the moment the error span pops in and pops out with no effects. My index template looks like this.

<script type="text/x-handlebars" data-template-name="index">
     <div class="errorbox">
          {{#if error }}
          <span class="error">
               {{ error }}
          </span>
          {{/if}}
     </div>

     <label>What is your name?</label>
     {{input type="text" action="type" value=username }}
</script>

and my controller:

App.IndexController = Ember.ObjectController.extend({
     actions: {
          type: function() {
               if (this.get('username').length > 10) this.set('error', 'Username beyond length!');
               else this.set('error', null);
          }
     },

     /* properties */
     error: false,
     username: false
});

Is there a simple way to do this?

Answer 1

A simple way to do it is to use CSS animations to do the effects:

.error {
  -webkit-animation: fadeIn 1s ease;
          animation: fadeIn 1s ease;
}

@-webkit-keyframes { from { opacity: 0.0 } to { opacity: 1.0 } }    
@keyframes         { from { opacity: 0.0 } to { opacity: 1.0 } }

Example: http://emberjs.jsbin.com/jikexepa/1/edit?css,output