Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.04.2017, 14:12
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

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

мне нужно сделать что бы в этом примере, в textarea выносился лог действий, то есть строка что анимация началсь и строка что анимация закончилась, поможет ли кто то готовым кодом?
Ответить с цитированием
  #2 (permalink)  
Старый 22.04.2017, 15:13
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,737

Я никогда не разбирался в работе 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);
});
Ответить с цитированием
  #3 (permalink)  
Старый 22.04.2017, 15:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Nexus
события начала и окончания анимации
transitionend
animationend

Animation Events
Ответить с цитированием
  #4 (permalink)  
Старый 22.04.2017, 15:49
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,737

рони, спасибо, буду знать, что такие события существуют)
Ответить с цитированием
  #5 (permalink)  
Старый 22.04.2017, 15:50
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

Я не могу понять как этим пользоваться, вставил перед закрытым тегом head, добавил текст ареа на страницу, но оно не заполняется
Ответить с цитированием
  #6 (permalink)  
Старый 22.04.2017, 15:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от Megazupik
вставил перед закрытым тегом head
onload или вниз страницы
Ответить с цитированием
  #7 (permalink)  
Старый 22.04.2017, 16:06
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

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

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

а ваш метод как я понял именно по таймеру работает
Ответить с цитированием
  #8 (permalink)  
Старый 22.04.2017, 16:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Megazupik,
клик начало анимации, у вас уже есть -- ссылки с примерами окончания тоже. сложите пазл.
Ответить с цитированием
  #9 (permalink)  
Старый 22.04.2017, 16:32
Интересующийся
Отправить личное сообщение для Megazupik Посмотреть профиль Найти все сообщения от Megazupik
 
Регистрация: 22.04.2017
Сообщений: 17

<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, 22.04.2017 в 16:39.
Ответить с цитированием
  #10 (permalink)  
Старый 22.04.2017, 16:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

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

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


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Из одного textarea в другой… Chile Events/DOM/Window 1 10.02.2016 09:16
Вопрос по textarea stivins Элементы интерфейса 3 05.11.2015 16:59
не могу программно изменить значение textarea в онлайн редакторе rusik Общие вопросы Javascript 6 24.10.2015 15:01
обновить textarea wp2 Events/DOM/Window 6 03.02.2012 23:44
bbcodes вставляются в чужой textarea foreach Events/DOM/Window 2 30.01.2012 21:15