Javascript.RU

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

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

Честно говоря не тестировал.

var element=document.getElementById('card'),
    textarea=document.getElementsByTagName('textarea')[0],
	data={
		'Начало процесса':['animationstart','webkitAnimationStart'],
		'Конец процесса':['animationend','webkitAnimationEnd']
	}

for(var msg in data){
	if(!data.hasOwnProperty(msg))
		continue;
	
	for(var key in data[msg]){
		if(!data[msg].hasOwnProperty(key))
			continue;
		
		element.addEventListener(data[msg][key],function(){
			textarea.value+="\n"+msg;
		},false);
	}
}
Ответить с цитированием
  #13 (permalink)  
Старый 22.04.2017, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Megazupik,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>CSS3 flip</title>

<!-- ===== style sheets ===== -->
<style>
* { margin: 0; padding: 0; }

.container {
  margin: 100px auto auto 100px;
  position: relative;
  width: 190px;
  height: 266px;
  /* задаем глубину сцене */
  -webkit-perspective: 600px; /* webkit */
  -moz-perspective: 600px; /* mozilla */
  -ms-perspective: 600px; /* IE 10 */
  -o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
  perspective: 600px;	/* св-во по стандатам */
}

#card { /* поворачивать будем общий контейнер */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;

  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  -ms-transition: -moz-transform 0.5s;
  -o-transition: -o-transform 0.5s;
  transition: transform 0.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;	/* указываем, что дочерние элементы находятся в 3D пространстве */
}
#card.flip {	/* добавляя этот класс, поворачивеам контейнер на 180 градусов */
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -ms-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

figure {
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;	/* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
.back {
  background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-back.png);
}
.front {
  background: url(http://www.xiper.net/examples/html-and-css-tricks/effects/card-front.png);
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );	/* в начальном положении фэйс карты к нам развернут на 180 градусов */
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var button = document.getElementById("button"),
        textarea = document.getElementsByTagName("textarea")[0],
        element = document.getElementById("card");
    button.addEventListener("click", function() {
        textarea.value += "\nНачало процесса";
        element.classList.toggle("flip")
    }, false);

    function showMessage() {
        textarea.value += "\nКонец процесса"
    }
    element.addEventListener("transitionend", showMessage, false)
}, false);
</script>
</head>

<body>

<div class="container" id="container">
<div id="card">
  <figure class="back"></figure>
  <figure class="front"></figure>
</div>
</div>

<input type="button" value="пуск" id="button" /><br>
<textarea name="" rows="30"  ></textarea>

</body>
</html>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Из одного 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