Animate Focus

components.my-component.js

import Ember from 'ember';
import move from 'ember-animated/motions/move';
import opacity from 'ember-animated/motions/opacity';
import { easeOut, easeIn } from 'ember-animated/easings/cosine';
import Promise from 'rsvp';

export default Ember.Component.extend({
  myProperty: false,
  transition: function* ({ insertedSprites, keptSprites, removedSprites, duration }) {

    yield Promise.all([
      ...insertedSprites.map(sprite => {
        sprite.startAtPixel({ x: window.innerWidth });
        return Promise.all([
          move(sprite, { easing: easeOut, duration }),
          opacity(sprite, { to: 1, duration })
        ]).then(() => {
          // old school way from id
          if (sprite.element.id === "autofocus") {
            sprite.element.autofocus = true;
          }
        });
      }),
      ...keptSprites.map(move),

      removedSprites.map(sprite => {
        sprite.endAtPixel({ x: -sprite.initialBounds.width });
        return Promise.all([
          move(sprite, { easing: easeIn, duration }),
          opacity(sprite, {to: 0, duration })
        ]);
      })
    ]);

    // TODO: not this
  },
});

templates.application.hbs

{{my-component}}

templates.components.my-component.hbs

{{#animated-if myProperty use=transition duration=300}}
  <input type="text" id="autofocus" />
  <input type="text" />
{{else}}
  <button onclick={{action (mut myProperty) true}}>Click to animate</button>
{{/animated-if}}

twiddle.json

{
  "version": "0.14.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
    "ember-data": "2.18.2",
    "ember-animated": "0.3.0"
  }
}