时间戳

首页 > 解决方案 > 翻转动画在其他浏览器中的行为非常不同

html - 翻转动画在其他浏览器中的行为非常不同

问题描述

我目前正在制作一些 div 的翻转动画。

但是，我发现它在我尝试过的每个浏览器中都运行不正确且不同。只有 Edge 以我想要的方式工作。

我想单击“翻转”文本来翻转以显示.flipping-view-backdiv，并隐藏.flipping-view-frontdiv。此外，position:fixed即使在滚动时，背面带有 div 的工具栏也应固定在页面顶部。

实际上，这仅适用于某些浏览器。

On Edge：这正是我想要的。视频

在 Chrome 上：前面的 div 翻转，但后面看不到后面的 div。仅在旋转转换完全完成后才会弹出后置 div。奇怪的是，在翻转过程中的任何时候滚动也会触发后面的 div 弹出。此外，向下滚动会使固定的 div 看不见。视频

在 iOS Safari 上：这会正确翻转，但向下滚动会使固定 div 移出视线。视频

在所有这些视频中，我点击了翻转文本并等待动画完成。然后我向下滚动。

如何使翻转动画正确并在所有浏览器中将固定 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>

标签： htmlcsscross-browsercss-transforms

解决方案

可能与浏览器本身有关，也许看看-webkit。有针对不同浏览器的 webkits，因此您可能需要为不同的浏览器使用多个 webkits

什么是 WebKit，它与 CSS 有什么关系？

那篇文章可能会给你更多信息

推荐阅读