Поимать окончание анимации и вывести картинку.
Учусь 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); |
karssen,
а если так? строка 87 else {..'finishAnimation'.} |
рони,
Благодарю, а то глаз замылился, уже не соображал как подцепить правильно. http://plnkr.co/edit/qamVQqgeJxCHHElnfwYD?p=preview Рабочий вариант, если кому то будет интересно. |
Часовой пояс GMT +3, время: 21:00. |