Question

我一直试图获得一个流畅的滚动动画，但主要是在JS .. 这个问题还没有解决，所以我决定尝试使用CSS3。现在我想通过调用一个JS函数来使这个动画响应，该函数为响应动画对象的动画添加CSS规则。这是我到目前为止所获得的JS代码。我也会留下一个小提琴，但我是新手，所以事情可能不会马上起作用。

function getTexts() {

    var element = document.getElementsByClassName('toplink');

    for (x = 0, len = element.length;  x < len; x++){

        var ID = element[x].textContent.toLowerCase();
        var object = document.getElementById(ID);
        console.log(object);
        addCSSAnimator(ID);

    }
}

function addCSSAnimator(el) {

    var sheet = document.styleSheets[0];
    var DOM = document.getElementById(el);
    var Class = DOM.getAttribute("class");
    var Parent = DOM.parentElement.getAttribute("id");
    var rect = DOM.getBoundingClientRect();

    var rule = ".toplink[ id= '"+el+"' ]:target - #"+Parent+" div."+Class+" {\n" +
        "-webkit-transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
        "transform: translateY( +"+rect.y.toPrecision(4)+'px'+" );\n" +
        "}";

    console.log("Stylesheet: ",sheet," object: ",DOM," Class: ",Class," offset X&Y:",rect.x," ",rect.y);

    console.log(rule);

    sheet.insertRule("body { background-color: 0; }", 1);
}

https://jsfiddle.net/dtj46c64/

Answer 1

您可以尝试使用此方案转到jquery。使用document.ready和window.resize函数来处理动画，而不是for循环。使用jquery .each（）函数来获取元素。尝试解决以下代码，我改变了你一起去。希望这能帮助您实现目标：

 <script>
    function getTexts() {

        $(".toplink").each(function () {
            let ID = $(this)
            console.log(ID);
            addCSSAnimator(ID);
        });
    }

    function addCSSAnimator(el) {

        var sheet = document.styleSheets[0];
        var DOM = el;
        var Class = DOM.attr("class");
        var Parent = DOM.parent().attr("id");
        var rect = DOM[0].getBoundingClientRect();
        var rule = ".toplink[ id= '" + el + "' ]:target - #" + Parent + " div." + Class + " {\n" +
            "-webkit-transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
            "transform: translateY( +" + rect.top.toPrecision(4) + 'px' + " );\n" +
            "}";

        console.log("Stylesheet: ", sheet, " object: ", DOM, " Class: ", Class, " offset X&Y:", rect.left, " ", rect.top);

        console.log(rule);

        sheet.insertRule("body { background-color: 0; }", 1);

    }

    $(window).on('resize', function () {
        getTexts();
    });

    $(document).ready(function () {
        getTexts();
    });
    </script>

注意我将rect.y更改为rect.top，因为在某些浏览器中，getBoundingClientRect函数不返回x和y值，但是left和top总是被填充。

也不知道为什么你得到了对象父级的id，因为没有id设置为anchor class =“toplink”的父级，所以它总是返回null或为空。

很抱歉没有100％的答案，因为我很忙，但我希望到目前为止我建议的解决方案可以帮助你调整并找到你想要的东西。

响应平滑滚动CSS3动画？

1 个答案: