В настоящее время я работаю над анимацией переворачивания некоторых div-ов.
Однако я обнаружил, что он работает неправильно и по-разному в каждом браузере, который я пробовал. Только Edge работает так, как я хочу.
Я хочу щелкнуть текст «перевернуть», чтобы перевернуть, чтобы показать .flipping-view-back div и скрыть .flipping-view-front div. Кроме того, панель инструментов с position:fixed на заднем элементе должна быть зафиксирована в верхней части страницы даже при прокрутке.
На самом деле, это работает только в некоторых браузерах.
В Edge: Это работает именно так, как я хочу. Видео
Вкл. Chrome: передний элемент переворачивается, но за ним нет видимого заднего элемента. Back div появляется только после того, как переход вращения полностью завершен. Как ни странно, прокрутка в любое время во время переворота также вызовет всплывающий задний div. Кроме того, прокрутка вниз перемещает фиксированный div вне поля зрения. Видео
Вкл. iOS Safari: Это правильно переворачивается, но прокрутка вниз смещает фиксированный div вне поля зрения. Видео
Во всех этих видеороликах я нажимал на всплывающий текст и ждал, пока анимация завершится sh. Затем я прокрутил вниз.
Как сделать правильную анимацию покадрового изображения и сохранить фиксированный div вверху во всех браузерах?
var currView = 0;
const rotatingViewElem = document.querySelector(".main");
const VIEW_FEED = 0;
const VIEW_FLIPPING_SEND = 1;
var viewFeedElem = document.querySelector(".view-positioner.feed");
var viewCreateElem = document.querySelector(".view-positioner.create");
var viewSelectRecipientsElem = document.querySelector(".view-positioner.select-recipients");
var viewFlippingSendElem = document.querySelector(".view-positioner.flipping-send");
var viewsList = [viewFlippingSendElem];
function flipView(isGoForward) {
var flippingElem = viewsList[currView];
var globalRotate;
if (isGoForward) {
globalRotate = "rotateY(180deg)";//flip around
} else {
globalRotate = "rotateY(0deg)";
}
flippingElem.style.transform = globalRotate;
}
document.querySelector(".create-send-button").addEventListener("click", function (e) { flipView(true) })
body, html{
width:100%;
height:100%;
margin:0px;
overflow:hidden;
}
.main{
perspective: 2000px;
height:100%;
}
.flipping-view-wrapper{
transform: rotateY(0);
transform-style: preserve-3d;
transition: transform 5.5s;
}
body{
height: 100%;
}
.view{
transform-style: preserve-3d;
position: relative;
padding-top:1px;
overflow-y:auto;
height: calc(100% - 1px);
width:100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.view-positioner{
position: absolute;
left:0px;
top:0px;
width:100%;
height:100%;
}
.flipping-view-front{
background-color: pink;
transform: rotateY(0deg);
}
.flipping-view-back{
background-color: green;
transform:rotateY(180deg);
}
.create-send-button{
cursor: pointer;
}
/* begin top toolbar */
.top-toolbar{
position:fixed;
top:0px;
left:0px;
width:100%;
height:55px;
background:#FFFB00;
}
<!DOCTYPE html>
<html>
<body class="lightblue">
<div class="main">
<div class="view-positioner flipping-send flipping-view-wrapper lightblue ">
<div class="view-positioner view create flipping-view-front">
<div class="create-inputs center">
<div class="create-send-button" style="font-size: 50px;">
flip to the backside this is long so you can see
</div>
</div>
</div>
<div class="view-positioner view select-recipients lightblue flipping-view-back">
<div class="top-toolbar">
fixed
</div>
<div style="width:10px">Long text a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a
a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a</div>
</div>
</div>
</div>
</body>
</html>