Question

我有一个元素，这个动画从屏幕边缘的底部弹出，然后在循环中弹出（不是完全向下）。下面的代码非常适用于此。但是，有一个问题。当浏览器全屏显示时，百分比会占用旧视口大小而不是新视口大小...使百分比关闭。我该怎么办？如果有这种方法的话，我会写原始的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全屏模式将显示它不会滑动到与全屏模式不同的水平。

Answer 1

你在用什么浏览器发短信？如果IE出现问题，并且您使用的是外部样式表，请尝试将其添加到<link rel='stylesheet'>中的<head>。这可能适用于其他浏览器。

<link rel='stylesheet' type='text/css' href='/nameofstylesheet.css?v=2'>

请参阅，只需将版本查询添加到href的{{1}}。

CSS3百分比值未使用调整大小的视口，而是使用旧的视口大小

1 个答案: