CSS-переход для транзитной страницы не запускается - PullRequest
Новая
       16

CSS-переход для транзитной страницы не запускается

0 голосов
/ 19 сентября 2018

У меня есть переход страницы, я пытаюсь перейти на мой сайт.У меня есть 2 элемента 50% высоты, 100% ширины, один размещенный до и после тела (с псевдоселекторами).Я бы хотел, чтобы 2 элемента скользили к середине экрана, покрывая фоновое содержимое.Переход запускается, когда класс «меняется» добавляется в тело через Javascript. 

document.getElementById("btn").addEventListener("click", fakeReq);

function fakeReq() {
  let body = document.body;
  body.classList.add("is-changing");
  console.log("class added");
  setTimeout(function() {
    body.classList.remove("is-changing");
    console.log("class removed");
  }, 5000);
}
body {
  height: 100vh; 
  width: 100%;
  background-color: grey; 
}

main {
  display: flex;
  height: 100%; 
  justify-content: center; 
  align-items: center; 
}


body::after, body::before {
	height: 50vh; 
	width: 100%; 
	position: fixed; 
	left: 0; 
	background-color: blue; 
	z-index: 10; 

}

body::before {
	top: 0; 
	transform: translateY(-100%); 
}

body::after {
	bottom: 0; 
	transform: translateY(100%);
}

body.is-changing::after, body.is-changing::before {
	transform: translateY(0); 
}

.loading-bar {
	position: fixed; 
	height: 2px; 
	width: 90%; 
}

.loading-bar::before {
	position: absolute; 
	background-color: aqua; 
	left: 0; 
	top: 0; 
	height: 100%; 
	width: 100%; 
	transform: scaleX(0);
	transform-origin: left center; 
}

.is-changing .loading-bar::before {
	transform: scaleX(1);
}
<body>
  <main>
    <div class="index main-content">
      <h1>Home Page</h1>
      <button id="btn">html request</button>
    </div>
  </main>
</body>

Ответы [ 3 ]

0 голосов
/ 19 сентября 2018

Вы можете использовать следующее 

document.getElementById("btn").addEventListener("click", fakeReq);

function fakeReq() {
  let body = document.body;
  body.classList.add("is-changing");
  console.log("class added");
  setTimeout(function() {
    body.classList.remove("is-changing");
    console.log("class removed");
  }, 5000);
}
body {
  height: 100vh; 
  width: 100%;
  background-color: grey; 
}

main {
  display: flex;
  height: 100%; 
  justify-content: center; 
  align-items: center; 
}


body::after, body::before {
content:'';
	height: 50vh; 
	width: 100%; 
	position: fixed; 
	left: 0; 
	background-color: blue; 
	z-index: 10; 

}

body::before {
content:'';
	top: 0; 
	transform: translateY(-100%); 
  transition: .5s all;
}

body::after {
content:'';
	bottom: 0; 
	transform: translateY(100%);
}

body.is-changing::after, body.is-changing::before {
content:'';
	transform: translateY(0); 
}

.loading-bar {
	position: fixed; 
	height: 2px; 
	width: 90%; 
}

.loading-bar::before {
content:'';
	position: absolute; 
	background-color: aqua; 
	left: 0; 
	top: 0; 
	height: 100%; 
	width: 100%; 
	transform: scaleX(0);
	transform-origin: left center; 
}

.is-changing,.loading-bar::before {
	transform: scaleX(1);
}
<body>
  <main>
    <div class="index main-content">
      <h1>Home Page</h1>
      <button id="btn">html request</button>
    </div>
  </main>
</body>
0 голосов
/ 19 сентября 2018

Вы пропустили добавление свойства content в pseudo-elements, которое обязательно , чтобы сделать их доступными на странице.Вы также пропустили добавление свойства transition в pseudo-elements для достижения анимации скольжения вверх / вниз.

Вот фрагмент, содержащий рабочую демонстрацию, я использовал только код, связанный с вашей проблемой: 

document.getElementById("btn").addEventListener("click", fakeReq);

function fakeReq() {
  let body = document.body;
  body.classList.add("is-changing");
  console.log("class added");
  setTimeout(function() {
    body.classList.remove("is-changing");
    console.log("class removed");
  }, 5000);
}
body {
  height: 100vh; 
  width: 100%;
  background-color: grey;
  position: relative; /* not really related to your issue but, to make sure that the body's pseudo-elements are positioned relative to the body */
}

main {
  display: flex;
  height: 100%; 
  justify-content: center; 
  align-items: center; 
}


body::after, body::before {
    content: ""; /* make the pseudo-elements available */
	height: 50vh; 
	width: 100%; 
	position: fixed; 
	left: 0; 
	background-color: blue; 
	z-index: 10; 
    transition: all .8s ease-out; /* allow the animation, change this rule per your requirements */
}

body::before {
	top: 0; 
	transform: translateY(-100%); 
}

body::after {
	bottom: 0; 
	transform: translateY(100%);
}

body.is-changing::after, body.is-changing::before {
	transform: translateY(0); 
}
<body>
  <main>
    <div class="index main-content">
      <h1>Home Page</h1>
      <button id="btn">html request</button>
    </div>
  </main>
</body>

Подробнее о after псевдоэлементе.

Learnбольше о before псевдоэлементе.

0 голосов
/ 19 сентября 2018

Мне кажется, что вы столкнулись с двумя проблемами.

Первая проблема заключается в том, что вы забыли включить атрибут content в свои псевдоэлементы (часто это будет пусто, например * 1004).*).Без этого атрибута ваши псевдоэлементы не будут существовать в DOM.Выполнение фрагмента кода и его проверка подтверждают это, поскольку псевдоэлементы нигде не найдены.

Во-вторых, вы создаете несколько псевдоэлементов.body::before - это собственный псевдоэлемент, а body.is-changing::before - отдельный псевдоэлемент.Если вы надеетесь создать постоянный набор элементов, которые действуют как «двери» для отображения загрузки, вы можете рассмотреть возможность создания двух реальных элементов, которые расположены в position: fixed выше и ниже области просмотра, а затем скользить внутрь или наружу, когдакласс добавлен.Возможно, это могут быть div.upper-door и div.lower-door.

Кроме того, мне кажется, что вам нужен переход для вашего преобразования, иначе псевдоэлементы просто "защелкнутся" взад-вперед,Вы можете контролировать положение своих элементов в разных точках во время этого перехода с помощью анимации CSS.Ваш JavaScript в основном остался бы прежним, если бы не таргетинг на дивизии .upper-door и .lower-door с использованием document.querySelector(), или просто использование идентификаторов, а не классов и нацеленность с getElementById(), если это имеет больше смысла для вас.Ваш CSS может выглядеть следующим образом: 

div.upper-door {
    top: 0;
    transform: translateY(-100%);
}

div.upper-door.is-changing {
    animation-duration: 5s;
    animation-name: upper-door-closeopen;
}

div.lower-door {
    bottom: 0;
    transform: translateY(100%);
}

div.lower-door.is-changing {
    animation-duration: 5s;
    animation-name: lower-door-closeopen;
}

@keyframes upper-door-closeopen {
    0% {
        transform: translateY(-100%);
    }
    25% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

@keyframes lower-door-closeopen {
    0% {
        transform: translateY(100%);
    }
    25% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

Анимация CSS будет срабатывать при добавлении .is-changing к элементу.В ходе эксперимента вы можете обнаружить, что различные варианты этого решения (например, использование прослушивателей событий, если нажатие кнопки вызывает экран загрузки) являются идеальными.

На MDN * 1025 имеется большой ресурс* для анимации CSS, если вам нужна дополнительная информация.

...