Web Animation with Ember

application.controller.js

import Controller from 'ember-controller';

export default class ApplicationController extends Controller {
}

application.route.js

import Route from 'ember-route';

export default class ApplicationRoute extends Route {
  activate() {
    super.activate(...arguments);
    document.body.classList.add('standard');
  }
}

application.template.hbs

<header class="container-fluid">
  <h1>Application Template</h1>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

components.anim-elem.component.js

import Component from 'ember-component';

export default class AnimElemComponent extends Component {
  didInsertElement() {
    this.player = this.element.animate([
      { left: '100px', width: '600px' }
    ], {
      duration: 500,
    	easing: 'linear',
    	delay: 500,
    	iterations: 1,
      fill: 'forwards'
    });
    
    this.set('status', this.player.playState);
    
    this.player.ready.then(() => {
      this.set('status', this.player.playState);
    });
    
    this.player.onfinish = () => {
      this.set('status', this.player.playState);
    };
  }
}

components.anim-elem.template.hbs

<code>{{status}}</code>
{{yield}}

index.controller.js

import Controller from 'ember-controller';

export default class IndexController extends Controller {
  start() {
    this.toggleProperty('running');
  }
}

index.route.js

import Route from 'ember-route';

export default class IndexRoute extends Route {
}

index.template.hbs

<h2>Index Template</h2>

<section>
	<button type="button" onclick={{action start}}>
  	{{if running "重置动画" "开始动画"}}
  </button>
</section>

{{#if running}}
	{{#anim-elem class="anim-elem"}}
		<p>Test Animation Element</p>
	{{/anim-elem}}
{{/if}}

styles.app.css

.anim-elem {
  position: fixed;
  left: 200px;
  
  padding: 1rem;
  width: 200px;
  height: 400px;
  
  box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.2);
}

twiddle.json

{
  "version": "0.12.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "hack": "//cdn.staticfile.org/hack/0.7.7/hack.css",
    "standard": "//cdn.staticfile.org/hack/0.7.7/standard.css",
    "jquery": "//cdn.staticfile.org/jquery/3.2.1/jquery.min.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-truth-helpers": "2.0.0"
  }
}