не работает e.target внутри setTimeout

Question

Мне нужно через 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 =&gt; {
        return response.json();
    }).then(result =&gt; {
        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 += '&lt;div id="book'+books.idBook+'" class="page"&gt;'+ books.idBook+'&lt;/div&gt;';
    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>

Answer 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 =&gt; {
  return response.json();
}).then(result =&gt; {
  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>