[karssen]

Учусь javascript и на данном этапе пытаюсь разобраться с кастомными событиями, а так же их использованием в интерфейсах. Есть написанный мною скрипт, он ловит события на элементе контейнере. Если клик произошел по кнопке, то генерируется блок. Когда блок сгенирировался на нем срабатывает кастомное событие и всплывает до блока родителя, где оно отлавливается и запускается анимация. В данном случае это увеличение размеров блока до 100 пикселей в течение секунды. И вот по завершению анимации должно сработать кастомное событие, извещающее об окончании анимации на сгенирированном блоке и в этот блок должна быть добавлена картинка. Собственно сейчас получается, если раскомментировать код, что картинка сразу показывается. Подскажите как исправить.
http://plnkr.co/edit/qamVQqgeJxCHHElnfwYD?p=preview

<style>
    .transformer-button {
      background-image: linear-gradient(#cb72cb 0%, #a003a0 100%);
      padding: 6px 10px;
      border: none;
      border-radius: 5px;
      box-shadow: 2px 2px 6px #7d037d;
      cursor: pointer;
      color: #fff;
      margin-bottom: 20px;
    }
    
    .shadow {
      box-shadow: 1px 1px 4px #000;
    }
    
    .image-container {
      background-color: #aaa;
      width: 10px;
      height: 10px;
    }
    
    .transformer-button:focus {
      outline: none;
    }
  </style>

  <div class="transformer" data-role="container">
    <button class="transformer-button" data-role="opener">Magic Button</button>
  </div>

'use strict'

    class Transformer {
      constructor(options) {
        this._elem = options.elem;

        this._elem.addEventListener('click', this._onClick.bind(this));
        this._elem.addEventListener('appearance', this._onDivAppearance.bind(this));
       /* this._elem.addEventListener('finishAnimation', this._onFinishAnimation.bind(this));*/
      }

      _onClick(event) {
        let target = event.target;
        let opener = target.closest('[data-role=opener]');
        let image = this._elem.querySelector('[data-role=image]');

        if (target != opener) return;

        if (image) {
          let box = this._elem.removeChild(image);
        }

        opener.addEventListener('mousedown', this._onOpenerMousedown.bind(this));
        opener.addEventListener('mouseup', this._onOpenerMouseup.bind(this));

        let div = document.createElement('div');
        div.setAttribute('data-role', 'image');
        /*div.classList.add('image-container');*/
        div.style.width = '10px';
        div.style.height = '10px';
        div.style.backgroundColor = '#aaa';
        this._elem.appendChild(div);

        let appearance = new CustomEvent("appearance", {
          bubbles: true
        });

        div.dispatchEvent(appearance);
      }

      _onDivAppearance(event) {
        let target = event.target;

        this._animate(this._draw.bind(this, target), 1000);

       /* let finishAnimation = new CustomEvent("finishAnimation", {
          bubbles: true
        });

        target.dispatchEvent(finishAnimation);*/
      }

     /* _onFinishAnimation(event) {
        let imageContainer = event.target;
        let image = document.createElement('img');

        image.setAttribute('src', 'http://ava.prohatku.ru/media/image/200jpg/fox/0014.jpg');

        imageContainer.appendChild(image);
      }*/

      _onOpenerMousedown(event) {
        event.target.classList.add('shadow');
      }

      _onOpenerMouseup(event) {
        event.target.classList.remove('shadow');
      }

      _animate(draw, duration) {
        let start = performance.now();

        requestAnimationFrame(function animate(time) {
          // определить, сколько прошло времени с начала анимации
          let timePassed = time - start;

          // возможно небольшое превышение времени, в этом случае зафиксировать конец
          if (timePassed > duration) timePassed = duration;

          // нарисовать состояние анимации в момент timePassed
          draw(timePassed);

          // если время анимации не закончилось - запланировать ещё кадр
          if (timePassed < duration) {
            requestAnimationFrame(animate);
          }

        });
      }

      _draw(target, timePassed) {
        target.style.width = timePassed / 5 + 'px';
        target.style.height = timePassed / 5 + 'px';
      }

    }


    let options = {
      elem: document.querySelector('[data-role=container]')
    }

    let transformer = new Transformer(options);