New Twiddle

components.das-badge\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { next } from '@ember/runloop';
import { action } from '@ember/object';

export default class extends Component {
  
  @tracked showOldCount = false;
  
	lastCounts = [];

	get oldCount() {
    this.lastCounts.push(this.args.count);
    if (this.lastCounts.length > 1) {
      next(() => {
        this.showOldCount = true;
        console.log(this.showOldCount);
      });
      return this.lastCounts.shift();
    } else {
      return null;
    }
  }

  get normalizedCount() {
    const c = parseInt(this.args.count);
    return c;
  }

	@action
	resetCountDisplay() {
    this.showOldCount = false;
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @tracked count = 5;

	@action
	incrementCount() {
    this.count++;
  }
}

styles.app\.css

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

.button {
  display: block;
  width: 64px;
  height: 64px;
  background: rgba(255, 0, 255, 0.2);
}

.badge-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
}

.badge {
	display: block;
  position: absolute;
  top: -0.5em;
  right: -0.5em;
  color: white;
  background: fuchsia;
  padding: 0.25em 0.5em;
  border-radius: 5em; /* lol */
  overflow: hidden;
}

.badge.show-old-count:after {
  display: block;
	animation: 0.5s slidein;
}

.badge:after {
  content: attr(data-old-count);
  display: none;
  position: absolute;
  box-sizing: border-box;

  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0.25em 0.5em;

  background: cyan;
}

@keyframes slidein {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

templates.application\.hbs

<DasBadge @count={{this.count}}>
	<button class="button" {{on 'click' this.incrementCount}}>+</button>
</DasBadge>

templates.components.das-badge\.hbs

<div class="badge-wrapper">
	{{yield}}
  <i 
  	class="badge {{if this.showOldCount "show-old-count"}}"
    data-old-count={{this.oldCount}}
    {{on "animationend" this.resetCountDisplay}}
  >
    {{normalizedCount}}
  </i>
</div>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}