Лог появляющийся в textarea
Привет всем.
Увидел на форуме вот такой скрипт http://www.xiper.net/examples/html-a...lip-click.html мне нужно сделать что бы в этом примере, в textarea выносился лог действий, то есть строка что анимация началсь и строка что анимация закончилась, поможет ли кто то готовым кодом? |
Я никогда не разбирался в работе 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);
});
|
Цитата:
animationend Animation Events |
рони, спасибо, буду знать, что такие события существуют)
|
Я не могу понять как этим пользоваться, вставил перед закрытым тегом head, добавил текст ареа на страницу, но оно не заполняется
|
Цитата:
|
Однако у меня в условии задания именно сказано что:
- окончание анимации ячейки в консоль выводить на реальное завершение анимации, а не по таймеру а ваш метод как я понял именно по таймеру работает |
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. |
Megazupik,
зачем добавлять постоянно обработку окончания, вынесите это из клика |
Честно говоря не тестировал.
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);
}
}
|
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>
|
| Часовой пояс GMT +3, время: 05:57. |