listening to transitionend

components.click-me.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  classNames: ['click-me'],

  classNameBindings: ['flip:ohno:awyeah'],
  
  flip: false,

  state: Ember.computed('flip', function() {
    const flip = this.get('flip');
    return flip ? 'D:' : ';D';
  }),
  
  someText: Ember.computed('flip', function() {
    const flip = this.get('flip');
    return flip ? 'noooo!!' : 'yesss!!';
  }),
  
  click: function() {
    this.toggleProperty('flip');
  },
  
  didInsertElement: function() {
    this._super(...arguments);
  
    const el = this.element;
    el.addEventListener('transitionend', event => {
      this.transitionendCallback();
    }, false);
  },

  transitionendCallback: function() {
    console.log('transition ended');
    this.reportStatus(this.get('someText'));
  }

});

components.clickable-parent.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  state: '',

  actions: {
    
    somethingHappened: function(waaaat) {
      this.set('state', waaaat);
    }

  }

});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
});

styles.app.css

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

.click-me {
  border: 1px solid #000;
  text-align: center;
  width: 300px;
  height: 300px;
  line-height: 275px;
  font-size: 100px;
  cursor: pointer;
}

.awyeah {
  color: blue;
  background-color: yellow;
  transition: background-color 1s;
}

.ohno {
  color: white;
  background-color: gray;
  transition: background-color 1s;
}

templates.application.hbs

{{clickable-parent}}

templates.components.click-me.hbs

{{state}}

templates.components.clickable-parent.hbs

{{click-me reportStatus=(action "somethingHappened")}}
{{state}}

twiddle.json

{
  "version": "0.12.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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
  }
}