我有一个具有此动画的元素，该动画从屏幕边缘的底部弹出并在一个循环中向下（但不完全向下）弹出。下面的代码对此非常有用。但是，有一个问题。当浏览器全屏显示时，百分比占旧的视口大小，而不是新的视口大小，从而降低了百分比。我该怎么办？如果有办法的话，我也会写原始的javascript。
#chronoPopUp {
font-family: verdana, arial, helvetica, sans-serif;
background-color: white;
display: block;
width: 1300px;
height: 37%;
position: absolute;
z-index: 9;
margin-top: 661px;
margin-left: 60px;
-webkit-animation: slideUp 1s linear;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom: none;
}
#chronoPopDown {
-webkit-animation: slideDown 1s linear;
}
@-webkit-keyframes slideDown {
0% { -webkit-transform: translateY(0%); }
100% { -webkit-transform: translateY(75%); }
}
@-webkit-keyframes slideDownAllTheWay {
0% { -webkit-transform: translateY(0); }
100% { -webkit-transform: translateY(100%); }
}
@-webkit-keyframes slideUp {
0% { -webkit-transform: translateY(75%); }
100% { -webkit-transform: translateY(0%); }
}
HTML：
<div id="chronoPopUp" class="clickChronop">
<div id="chronoCircle" class="clickChrono">
<div id="circleLine1" class="clickChrono"></div>
<div id="circleLine2" class="clickChrono"></div>
</div>
Javascript：
var chronoListViewDisplay = function() {
var displayActive = true;
var toggleStatus = true;
var rotationAutomationSteps = [];
var automatedRotationTimer;
function toggleChronoListView(slideDown) {
var element = document.getElementById("chronoPopUp");
slideDown = typeof slideDown !== "undefined" ? slideDown : "slideDown";
console.log(slideDown);
if (toggleStatus) {
element.style.webkitAnimation = slideDown + " 1s linear forwards";
toggleStatus = false;
} else {
element.style.webkitAnimation = "slideUp" + " 1s linear forwards";
toggleStatus = true;
}
}
function rotationEngine() {
console.log("hi");
//always start with a slide up
rotationAutomationSteps[0] = setTimeout(toggleChronoListView, 2000);
toggleStatus = false;
rotationAutomationSteps[1] = setTimeout(toggleChronoListView, 4000);
}
function runAutomatedRotation() {
rotationEngine();
automatedRotationTimer = setInterval(rotationEngine, 4000);
}
return {
toggleChronoListView : toggleChronoListView,
toggleStatus: toggleStatus,
runAutomatedRotation: runAutomatedRotation,
}
}();
更新：请参见http://jsfiddle.net/3vecy/例如。击中F11全屏模式将显示它不会滑落到与退出全屏模式相同的水平。
最佳答案
您在用什么浏览器发短信？如果IE有问题，并且您正在使用外部样式表，请尝试将其添加到<link rel='stylesheet'>中的<head>中。
这可能在其他浏览器上起作用。
<link rel='stylesheet' type='text/css' href='/nameofstylesheet.css?v=2'>
看，只需将版本查询添加到
href的<link>。关于javascript - 不使用调整大小的视口(viewport)获取CSS3百分比值，而是使用旧的视口(viewport)大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21238677/