// A current problem with animations in Ember

// This simple example tries to animate a change to a computed property.

// Problem is, the markup changes before the animation can complete. This

// leads to dificult-to-predict behavior given the different sets of timings

// that are going on.

​

var App = Ember.Application.create();

​

var controller = Ember.Controller.create({

  name: "John"

});

​

​

AnimatedName = Ember.Component.extend({

  tagName: 'span',

  classNameBindings: ['isIn:t-rotate-in:t-rotate-out'],

  classNames: ['t-rotate'],

  template: Ember.Handlebars.compile("{{currentName}}"),

  currentName: null,

  isIn: true,

  nameDidChange: function() {

    this.set('isIn', false);

    this.$().one("webkitTransitionEnd", function() {

      this.set('currentName', this.get('name'));

      this.set('isIn', true);

    }.bind(this));

  }.observes("name")

});

Ember.Handlebars.helper('animated-name', AnimatedName);

​

var view = Ember.View.extend({

  controller: controller,

  template: Ember.Handlebars.compile("Hello {{animated-name name=name}}")

}).create();

view.append();

​

// Change that computed property a few times on a timer.

changeName("Paul")("George")("Ringo");

​

function changeName(name) {

  changeName.time = changeName.time || 0;

  changeName.time += 2000;

  Ember.run.later(function() {

    controller.set("name", name);

  }, changeName.time);

  return changeName;

}

​

​