Лог появляющийся в textarea

[Megazupik]

Привет всем.
Увидел на форуме вот такой скрипт
http://www.xiper.net/examples/html-a...lip-click.html

мне нужно сделать что бы в этом примере, в textarea выносился лог действий, то есть строка что анимация началсь и строка что анимация закончилась, поможет ли кто то готовым кодом?

[Nexus]

Я никогда не разбирался в работе JS именно с css-анимацией (это, собственно, никогда нафиг и не нужно было), поэтому не знаю создаются ли события начала и окончания анимации (очень вряд ли создаются).
Я бы реализовал нужное очень примерно так:

var timer=false,
	animDuration=500,//Продолжительность анимации
	button=document.getElementById('button'),
	textarea=document.getElementsByTagName('textarea')[0];
	
button.addEventListener('click',function(){
	textarea.value+="\n"+'Animation begin.';
	if(timer!==false)
		clearTimeout(timer);
		
	timer=setTimeout(function(){
		textarea.value+="\n"+'Animation end.';
	},animDuration);
});

[рони]

события начала и окончания анимации

transitionend
animationend

Animation Events

[Nexus]

рони, спасибо, буду знать, что такие события существуют)

[Megazupik]

Я не могу понять как этим пользоваться, вставил перед закрытым тегом head, добавил текст ареа на страницу, но оно не заполняется

[рони]

вставил перед закрытым тегом head

onload или вниз страницы

[Megazupik]

Однако у меня в условии задания именно сказано что:

- окончание анимации ячейки в консоль выводить на реальное завершение анимации, а не по таймеру

а ваш метод как я понял именно по таймеру работает

[рони]

Megazupik,
клик начало анимации, у вас уже есть -- ссылки с примерами окончания тоже. сложите пазл.

[Megazupik]

<script>
var	button=document.getElementById('button'),
	textarea=document.getElementsByTagName('textarea')[0];
	
button.addEventListener('click',function(){
	textarea.value+="\n"+'Начало процесса';

		
	function showMessage() {
		textarea.value+="\n"+'Конец процесса';
    
}
var element = document.getElementById("card");
element.addEventListener("transitionend", showMessage, false);
});

</script>

Получился вот такой код, но он не кажется красивым, можно ли как то укоротить?И как сделать чтобы по завершению вращения одного блока начинал крутится следующий?

[рони]

Megazupik,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.