Animation cancel demo

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  datums: [
    { id: 1, name: 'banana' },
    { id: 2, name: 'pineapple' }
  ],
  
  actions: {
		moveTop(datum) {
      const datums = this.get('datums')
     	datums.removeObject(datum)
      datums.unshiftObject(datum)
    },
    moveBottom(datum) {
      const datums = this.get('datums')
     	datums.removeObject(datum)
      datums.pushObject(datum)
    },
  }
});

templates.application.hbs

<style type="text/css">
  @keyframes grow {
    0%   { width: 0%; }
    100% { width: 100%; }
  }

	.datum {
  	margin-bottom: 10px;
  }

  .progress {
    width: 0%;
    height: 10px;
    animation: grow 10s infinite;
    background-color: green;
  }  
</style>

<h1>Welcome to {{appName}}</h1>

{{#each datums key='id' as |datum|}}
	<div class="datum {{datum.name}}">
  	<button {{action 'moveTop' datum}}>&uarr;</button>
    <button {{action 'moveBottom' datum}}>&darr;</button>
	  {{datum.name}}
    <div class="progress"></div>
  </div>
{{/each}}

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"
  }
}