0

введите сюда описание изображенияМне нужно через 2 секунды после запуска анимации, устанавливать display none

e.target.style = 'animation: nextPage 2s 1 ease-in-out  !important';//добавить к текущему элементу анимацию
        setTimeout( function() {
            console.log(e.target);
            e.target.style.display = 'none';//после анимации(через 2сек)сделать страницу не видимой
        }, 2000);

но почему-то это не срабатывает. Что делать?

в консоли пишет, display none, но в elements пишет, что у элемента только анимация, а display - block

вот весь код:

window.onload = function() {
    let nextPage = 1;//страница, которую нужно выбрать из бд

    //добавить событие wheel для страницы
   function onPage() {
        let pages = document.querySelectorAll('.page');
        for(let i=0;i<pages.length;i++){
            pages[i].addEventListener("wheel", wheel);
        }
   }
   onPage();

   //перелистывание страниц
    function wheel(e) {
        let px = e.deltaY ; //на сколько была прокручена страница
        let self = e;
        if(px >= 100){
            let thet = e;
            e.target.style = 'animation: nextPage 2s 1 ease-in-out';//добавить к текущему элементу анимацию
            setTimeout( () => {
                that.target.style= 'display: none';
                that.target.style.removeProperty( 'animation');
            }, 2000);
            getBooks();
        }
        if(px <= -100){
            e.target.previousSibling.style = 'animation: nextPage 2s 1 ease-in-out reverse;';//добавить анимацию наоборот
            setTimeout(() => {
                e.target.previousSibling.style = 'display:block';
                e.target.style.removeProperty( 'animation');
            },2000);
        }
    }


    //получить запись из юд
    function getBooks() {
        let post = {
            'nextPage': nextPage //передать следующую страницу
        };
    
        let body = new FormData;
        for(let variable in post) body.append(variable, post[variable]);

        fetch(`${window.location.origin}/getTenBooks.php`, {
            method: 'post',
            mode: 'cors',
            body: body
        }).then(response => {
            return response.json();
        }).then(result => {
            console.log(result);
            try{ addBook(result); }
            catch { console.log('error'); }
            nextPage++;//след. страница на 1 больше
            onPage();
        });	
    }
    getBooks();


    function addBook(books){
        console.log( books.idBook); 
        document.querySelector('#pageBg').innerHTML += '<div id="book'+books.idBook+'" class="page">'+ books.idBook+'</div>';
        onPage();
    }   
    
}
root{
    position: absolute;
    width: 1000px;
    height: 1000px;
}
main{ 
    width: 90%;
    height: 75%;
    margin: 0 5%;
    padding: 11px;
    position: absolute;
    /* display: block; */
    background-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg);
    border-radius: 10px 10px 10px 10px;
    display: flex;
    justify-content: center;
    /* cursor: none; */
}
#books{
    position: absolute;
    width: 75%;
}

.content{
    position: relative;
    width: 99%;
    height: 99%;
    transform: translate(-50%, -50%);     
    left: 50%;
    top: 50%;
    box-shadow: inset 1px 1px 10px black;
    background-image: url(https://3djungle.ru/upload/resize_cache/iblock/618/400_400_1/618fcf9bb7963b741e1f5b862c6de26d.jpg);
    border-radius: 10px 10px 10px 10px;
    border: 10px solid black;
    background-attachment: local;
    border-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg) 10 round round;
}

.borderMain{
    background-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg);
    height: 98%;
    width: 99%;
    padding: 10px;
    border: 1px dashed #fffad1;
    border-radius: 10px 10px 10px 10px;
    box-shadow:  0px 0px 1px black;
}

#pageBg{
    background: #f4ebdc;
    position: absolute;
    width: 99%;
    height: 100%;
    box-shadow: 0px -0.5px 1px 0.3px gray, 0px -1px 1px 0.6px #f4ebdc, 0px -1.5px 1px 0.9px gray,0px -2px 1px 1.2px #f4ebdc,0px -2px 1px 1.5px gray, 0px -2.5px 1px 1.8px #f4ebdc, 0px -3px 1px 2.1px gray,0px -4px 1px 2.5px #f4ebdc, 0px -5px 1px 2.9px gray, 0px -6px 1px 3.4px #f4ebdc, 0px -5px 7px 10px black;
    margin: 0.5%;
    perspective: 5000px;
}
#loading{
    position: absolute;
    color: black;
}
.page{
    color: red;
    position: absolute;
    background: white;
    width: 100%;
    height: 100%;
    transform-origin: bottom;
    animation-timing-function: ease-out;
}
#one{
    z-index: 9;
    /* position: absolute; */
}#two{
    z-index: 8;
}#three{
    z-index: 7;
}#four{
    z-index: 6;
}#five{
    z-index: 5;
}

@keyframes nextPage{
    0%{transform: rotateX(0deg);}
    /* 99%{} */
    100%{transform: rotateX(-270deg);z-index: 6;}
}
<div id="root">
<main id="books">
    <div class="borderMain">
        <div class="content">
            <div id="pageBg">
                <div id="one" class="page">1</div>
                <div id="two" class="page">2</div>
                <div id="three" class="page">3</div>
                <div id="four" class="page">4</div>
                <div id="five" class="page">5</div>
            </div>
        </div>
    </div>
</main>
</div>

0

1 ответ 1

1

Вот вам решение

window.onload = function() {
  let nextPage = 1; //страница, которую нужно выбрать из бд

  //добавить событие wheel для страницы
  function onPage() {
    let pages = document.querySelectorAll('.page');
    for (let i = 0; i < pages.length; i++) {
      pages[i].addEventListener("wheel", wheel);
    }
  }
  onPage();

  //перелистывание страниц
  function wheel(e) {
    let px = e.deltaY; //на сколько была прокручена страница
    let self = e;
    if (px >= 100) {
      e.target.style = 'animation: nextPage 2s 1 ease-in-out'; //добавить к текущему элементу анимацию
      setTimeout(() => {
        self.target.style = 'display: none';
        self.target.style.removeProperty('animation');
      }, 2000);
      getBooks();
    }
    if (px <= -100) {
      e.target.previousSibling.style = 'animation: nextPage 2s 1 ease-in-out reverse;'; //добавить анимацию наоборот
      setTimeout(() => {
        self.target.previousSibling.style = 'display:block';
        self.target.style.removeProperty('animation');
      }, 2000);
    }
  }


  //получить запись из юд
  function getBooks() {
    let post = {
      'nextPage': nextPage //передать следующую страницу
    };

    let body = new FormData;
    for (let variable in post) body.append(variable, post[variable]);

    fetch(`${window.location.origin}/getTenBooks.php`, {
      method: 'post',
      mode: 'cors',
      body: body
    }).then(response => {
      return response.json();
    }).then(result => {
      console.log(result);
      try {
        addBook(result);
      } catch {
        console.log('error');
      }
      nextPage++; //след. страница на 1 больше
      onPage();
    });
  }
  getBooks();


  function addBook(books) {
    console.log(books.idBook);
    document.querySelector('#pageBg').innerHTML += '<div id="book' + books.idBook + '" class="page">' + books.idBook + '</div>';
    onPage();
  }

}
root {
  position: absolute;
  width: 1000px;
  height: 1000px;
}

main {
  width: 90%;
  height: 75%;
  margin: 0 5%;
  padding: 11px;
  position: absolute;
  /* display: block; */
  background-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg);
  border-radius: 10px 10px 10px 10px;
  display: flex;
  justify-content: center;
  /* cursor: none; */
}

#books {
  position: absolute;
  width: 75%;
}

.content {
  position: relative;
  width: 99%;
  height: 99%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  box-shadow: inset 1px 1px 10px black;
  background-image: url(https://3djungle.ru/upload/resize_cache/iblock/618/400_400_1/618fcf9bb7963b741e1f5b862c6de26d.jpg);
  border-radius: 10px 10px 10px 10px;
  border: 10px solid black;
  background-attachment: local;
  border-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg) 10 round round;
}

.borderMain {
  background-image: url(https://3djungle.ru/upload/resize_cache/iblock/b54/400_400_1/b54b61a4569eacef50523b7a17f496cd.jpg);
  height: 98%;
  width: 99%;
  padding: 10px;
  border: 1px dashed #fffad1;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0px 0px 1px black;
}

#pageBg {
  background: #f4ebdc;
  position: absolute;
  width: 99%;
  height: 100%;
  box-shadow: 0px -0.5px 1px 0.3px gray, 0px -1px 1px 0.6px #f4ebdc, 0px -1.5px 1px 0.9px gray, 0px -2px 1px 1.2px #f4ebdc, 0px -2px 1px 1.5px gray, 0px -2.5px 1px 1.8px #f4ebdc, 0px -3px 1px 2.1px gray, 0px -4px 1px 2.5px #f4ebdc, 0px -5px 1px 2.9px gray, 0px -6px 1px 3.4px #f4ebdc, 0px -5px 7px 10px black;
  margin: 0.5%;
  perspective: 5000px;
}

#loading {
  position: absolute;
  color: black;
}

.page {
  color: red;
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  transform-origin: bottom;
  animation-timing-function: ease-out;
}

#one {
  z-index: 9;
  /* position: absolute; */
}

#two {
  z-index: 8;
}

#three {
  z-index: 7;
}

#four {
  z-index: 6;
}

#five {
  z-index: 5;
}

@keyframes nextPage {
  0% {
    transform: rotateX(0deg);
  }
  /* 99%{} */
  100% {
    transform: rotateX(-270deg);
    z-index: 6;
  }
}
<div id="root">
  <main id="books">
    <div class="borderMain">
      <div class="content">
        <div id="pageBg">
          <div id="one" class="page">1</div>
          <div id="two" class="page">2</div>
          <div id="three" class="page">3</div>
          <div id="four" class="page">4</div>
          <div id="five" class="page">5</div>
        </div>
      </div>
    </div>
  </main>
</div>

9
  • этот вариант тоже не работает вот весь код
    – Влад
    Commented 5 авг. 2019 в 9:43
  • ой, не заметил) Но так всё-равно не работает, в браузере, когда эта функция отработала, пишет, что у этого элемента display block, и сам блок не пропадает.
    – Влад
    Commented 5 авг. 2019 в 9:49
  • не знаю почему, но всё равно не работает. Может с хромом что-то? Хотя я проверял в хроме и в канаре.
    – Влад
    Commented 5 авг. 2019 в 10:06
  • я вам сделал прям ваш код - смотрите ответ, только не могу разобраться: пишите в вопроса установить через 2 секунды display:block, а в коде display:none ) Commented 5 авг. 2019 в 10:07
  • я понял почему у вас работает, а у меня нет! Я вам скинул код, где в html уже есть блоки, а я их добавляю с помощью функции getBooks(). Если блоки вручную написаны, то работает, а если я их вставляю из бд через эту функцию, то не работает. Поможете?
    – Влад
    Commented 6 авг. 2019 в 9:43

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.