Demonstrate CSS animation on every property change

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  // The class names applied are automatically converted to skewer-case
  classNameBindings: ['toggleA', 'toggleB'],
  
  classNames: ['my-component'],
  
  count: 0,
  
  toggleA: Ember.computed('count', function() {
  	const count = this.get('count');

    if (count !== 0) {
    	return count % 2 === 1;
    }
  }),
  
  toggleB: Ember.computed('count', function() {
  	const count = this.get('count');
    
    if (count !== 0) {
    	return count % 2 === 0;
    }
  })
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  count: 0,
  
  actions: {
  	incrementCount() {
    	this.incrementProperty('count');
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.toggle-a {
	border: 1px solid red;
  animation: bounce1 1s;
}

.toggle-b {
	border: 1px solid green;
  animation: bounce2 1s;
}

@keyframes bounce1 {
    0%, 20%, 40%, 60%, 100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-10px);
    }

    30% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes bounce2 {
    0%, 20%, 40%, 60%, 100% {
        transform: translateY(0);
    }

    10% {
        transform: translateY(-10px);
    }

    30% {
        transform: translateY(-10px);
    }

    50% {
        transform: translateY(-10px);
    }
}

templates.application.hbs

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

{{my-component count=count}}

<button type="button" {{action "incrementCount"}}>
	Increment Count
</button>

templates.components.my-component.hbs

I'm a Box!

{{yield}}

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}