22.04.2017, 21:30
|
|
Интересующийся
|
|
Регистрация: 22.04.2017
Сообщений: 17
|
|
|
Ого спасибо, не ожидал что тут за просто так сделают для меня всю работу, хоть и не приятно но должен попросить о некоторых коррективах. В логе надо указывать старт работы скрипта вначале, и завершение работы в конце, а так же надо указывать начало и конец анимации каждого блока, и что бы выводился его номер при этом
Последний раз редактировалось Megazupik, 22.04.2017 в 22:11.
|
|
23.04.2017, 19:14
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Megazupik,
начало у всех в один момент, в момент клика, окончание по порядку расположения в DOM
|
|
23.04.2017, 19:29
|
|
Интересующийся
|
|
Регистрация: 22.04.2017
Сообщений: 17
|
|
Сообщение от рони
|
Megazupik,
начало у всех в один момент, в момент клика, окончание по порядку расположения в DOM
|
Но как тогда сделать что бы лог выводился следующим образом?
Начало процесса
начало поворота блока 1
начало поворота блока 2
конец поворота блока 1
конец поворота блока 2
... и так до 16 блока
Конец процесса |
|
23.04.2017, 19:41
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Megazupik,
могу предложить только фейковое окончание
var n = 0;
function showMessage() {
textarea.value += "\nКонец процесса " + (n+1);
n = ++n % card.length
}
|
|
23.04.2017, 20:05
|
|
Интересующийся
|
|
Регистрация: 22.04.2017
Сообщений: 17
|
|
|
Сообщение от рони
|
Megazupik,
могу предложить только фейковое окончание
var n = 0;
function showMessage() {
textarea.value += "\nКонец процесса " + (n+1);
n = ++n % card.length
}
|
хм, ну ладно допустим, а можно ли сделать так что бы кнопка при нажатии меняла свое название на слова "в процессе" а когда все анимации бы кончались меняла свое название назад |
|
23.04.2017, 20:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Megazupik,
button.addEventListener("click", function() {
button.value = "в процессе";
textarea.value += "\nНачало процесса";
element.classList.toggle("flip")
}, false);
var n = 0;
function showMessage() {
textarea.value += "\nКонец процесса " + (n+1);
n = ++n % card.length;
if(!n) button.value = "пуск"
}
Учебник
|
|
24.04.2017, 22:19
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,723
|
|
Я просто игрался. Не кроссбраузерно.
<!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;
display : flex;
flex-wrap: wrap;
/* задаем глубину сцене */
-webkit-perspective: 600px; /* webkit */
-moz-perspective: 600px; /* mozilla */
-ms-perspective: 600px; /* IE 10 */
-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
perspective: 600px; /* св-во по стандатам */
}
.card { /* поворачивать будем общий контейнер */
width: 190px;
height: 266px;
-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 пространстве */
}
.container .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.querySelector("#container>.card"),
card = document.querySelectorAll(".card");
button.addEventListener("click", function(){
element.classList.toggle('flip');
textarea.value+="\n"+'Item #1 Start';
},false);
[].forEach.call( card, function(child, i) {
var delay = i * 1.5,
duration = "2s"; //лучше в css перенести из скрипта
child.style.webkitTransitionDelay = delay + "s";
child.style.transitionDelay = delay + "s";
child.style.webkitTransitionDuration = duration;
child.style.transitionDuration = duration;
child.addEventListener('transitionend',function(e){
textarea.value+="\n"+'Item #'+(i+1)+' End';
var nextCard=this.nextElementSibling;
if(nextCard!==null){
nextCard.classList.toggle('flip');
var num=i+2;
setTimeout(function(){
textarea.value+="\n"+'Item #'+num+' Start';
},parseFloat(nextCard.style.transitionDelay.replace(/[^\d,\.]+/gim,''))*1000);
};
});
});
}, false);
if(document.readyState=='complete')
window.dispatchEvent(new Event('DOMContentLoaded'));
</script>
</head>
<body>
<div class="container" id="container">
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="card">
<figure class="back"></figure>
<figure class="front"></figure>
</div>
<div class="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>
|
|
25.04.2017, 10:44
|
|
Интересующийся
|
|
Регистрация: 22.04.2017
Сообщений: 17
|
|
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>CSS3 flip</title>
<!-- ===== style sheets ===== -->
<style>
* { margin: 0; padding: 0; }
.container {
width: 200px;
margin: 100px auto auto 100px;
position: relative;
display : flex;
flex-wrap: wrap;
/* задаем глубину сцене */
-webkit-perspective: 600px; /* webkit */
-moz-perspective: 600px; /* mozilla */
-ms-perspective: 600px; /* IE 10 */
-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
perspective: 600px; /* св-во по стандатам */
}
.card { /* поворачивать будем общий контейнер */
line-height: 50px;
text-align: center;
width: 50px;
height: 50px;
border: 2px solid blue;
box-sizing: border-box;
}
.container.flip .card { /* добавляя этот класс, поворачивеам контейнер на 180 градусов */
-webkit-transform: rotateX( 180deg );
-moz-transform: rotateX( 180deg );
-ms-transform: rotateX( 180deg );
-o-transform: rotateX( 180deg );
transform: rotateX( 180deg );
}
textarea, input{
width: 100%;
resize: none;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var button = document.getElementById("button"),
textarea = document.getElementsByTagName("textarea")[0],
element = document.querySelector(".container"),
card = document.querySelectorAll(".card");
[].forEach.call( card, function(child, i) {
var delay = i * 0.5;
child.style.webkitTransitionDelay = delay + "s";
child.style.transitionDelay = delay + "s";
child.style.webkitTransitionDuration = "2s" ;
child.style.transitionDuration = "2s" ;
});
// начать повторы с интервалом 0.5 сек
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 class="card">
1
</div>
<div class="card">
2
</div>
<div class="card">
3
</div>
<div class="card">
4
</div>
<div class="card">
5
</div>
<div class="card">
6
</div>
<div class="card">
7
</div>
<div class="card">
8
</div>
<div class="card">
9
</div>
<div class="card">
10
</div>
<div class="card">
11
</div>
<div class="card">
12
</div>
<div class="card">
13
</div>
<div class="card">
14
</div>
<div class="card">
15
</div>
<div class="card">
16
</div>
<input type="button" value="пуск" id="button" /><br>
<textarea name="" rows="30" ></textarea>
</div>
</body>
</html>
Вот получившийся у меня код, как его модифицировать так что бы было как у вас? то есть начало поворота карты отображалось в логе. В вашем коде я так и не понял как сделать так что бы вращение следующей карты наступало до конца вращения предыдущей
|
|
25.04.2017, 11:01
|
|
Интересующийся
|
|
Регистрация: 22.04.2017
Сообщений: 17
|
|
|
Сообщение от рони
|
Megazupik,
button.addEventListener("click", function() {
button.value = "в процессе";
textarea.value += "\nНачало процесса";
element.classList.toggle("flip")
}, false);
var n = 0;
function showMessage() {
textarea.value += "\nКонец процесса " + (n+1);
n = ++n % card.length;
if(!n) button.value = "пуск"
}
Учебник
|
Не понимаю как это прикрутить к моему коду, я его выложил комметарием выше |
|
25.04.2017, 11:04
|
|
Интересующийся
|
|
Регистрация: 22.04.2017
Сообщений: 17
|
|
|
Сообщение от рони
|
Megazupik,
могу предложить только фейковое окончание
var n = 0;
function showMessage() {
textarea.value += "\nКонец процесса " + (n+1);
n = ++n % card.length
}
|
И этот тоже не могу прикрутить |
|
|
|
