javascript - 是否可以从 JavaScript 更改 CSS 翻译距离值？

Question

我在 css 中有这段代码:

/*Animation Styles*/
.anim1 {
  -webkit-animation: anim1 5s; /* Chrome, Safari, Opera */
  animation: anim1 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes anim1 {
  to {
    background: yellow;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}
/* Standard syntax */
@keyframes anim1 {
  to {
    background: yellow;
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
  }
}

是否可以通过 javascript 将 0px 更改为其他内容？

---

这是我目前的尝试 -- referencing this SO answer :

// Setup animation classes
var setupAnimClasses = function(){
    var caroWidth = caroWrapper.offsetWidth;
    var caroHeight = caroWrapper.offsetHeight;
    var style = document.createElement('style');
    style.type = 'text/css';

    for(var i in pageQueue){
        var caroX = caroWidth * i; 
        style.innerHTML += "\
            .caroAnimp"+i+" {\n\
                -webkit-animation: animp"+i+" 0.6s; /* Chrome, Safari, Opera */\n\
                animation: animp"+i+" 5s;\n\
            }\n\
            @-webkit-keyframes animp"+i+" {\n\
                to {\n\
                    -webkit-transform:translateX("+caroX+"px);\n\
                    -ms-transform:translateX("+caroX+"px);\n\
                    transform:translateX("+caroX+"px);\n\
                }\n\
            @keyframes animp"+i+" {\n\
                to {\n\
                    background: yellow;\n\
                    -webkit-transform:translateX("+caroX+"px);\n\
                    -ms-transform:translateX("+caroX+"px);\n\
                    transform:translateX("+caroX+"px);\n\
                }\n\
            }\n";
    }

    style.setAttribute('class','caroAnimStyles');
    document.getElementsByTagName('head')[0].appendChild(style);
};
setupAnimClasses();

这运行良好并产生:

.caroAnimp0 {
    -webkit-animation: animp0 0.6s; /* Chrome, Safari, Opera */
    animation: animp0 5s;
}
@-webkit-keyframes animp0 {
    to {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
@keyframes animp0 {
    to {
        background: yellow;
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
.caroAnimp1 {
    -webkit-animation: animp1 0.6s; /* Chrome, Safari, Opera */
    animation: animp1 5s;
}
@-webkit-keyframes animp1 {
    to {
        -webkit-transform:translateX(1434px);
        -ms-transform:translateX(1434px);
        transform:translateX(1434px);
    }
@keyframes animp1 {
    to {
        background: yellow;
        -webkit-transform:translateX(1434px);
        -ms-transform:translateX(1434px);
        transform:translateX(1434px);
    }
}
.caroAnimp2 {
    -webkit-animation: animp2 0.6s; /* Chrome, Safari, Opera */
    animation: animp2 5s;
}
@-webkit-keyframes animp2 {
    to {
        -webkit-transform:translateX(2868px);
        -ms-transform:translateX(2868px);
        transform:translateX(2868px);
    }
@keyframes animp2 {
    to {
        background: yellow;
        -webkit-transform:translateX(2868px);
        -ms-transform:translateX(2868px);
        transform:translateX(2868px);
    }
}
.caroAnimp3 {
    -webkit-animation: animp3 0.6s; /* Chrome, Safari, Opera */
    animation: animp3 5s;
}
@-webkit-keyframes animp3 {
    to {
        -webkit-transform:translateX(4302px);
        -ms-transform:translateX(4302px);
        transform:translateX(4302px);
    }
@keyframes animp3 {
    to {
        background: yellow;
        -webkit-transform:translateX(4302px);
        -ms-transform:translateX(4302px);
        transform:translateX(4302px);
    }
}
.caroAnimp4 {
    -webkit-animation: animp4 0.6s; /* Chrome, Safari, Opera */
    animation: animp4 5s;
}
@-webkit-keyframes animp4 {
    to {
        -webkit-transform:translateX(5736px);
        -ms-transform:translateX(5736px);
        transform:translateX(5736px);
    }
@keyframes animp4 {
    to {
        background: yellow;
        -webkit-transform:translateX(5736px);
        -ms-transform:translateX(5736px);
        transform:translateX(5736px);
    }
}
.caroAnimp5 {
    -webkit-animation: animp5 0.6s; /* Chrome, Safari, Opera */
    animation: animp5 5s;
}
@-webkit-keyframes animp5 {
    to {
        -webkit-transform:translateX(7170px);
        -ms-transform:translateX(7170px);
        transform:translateX(7170px);
    }
@keyframes animp5 {
    to {
        background: yellow;
        -webkit-transform:translateX(7170px);
        -ms-transform:translateX(7170px);
        transform:translateX(7170px);
    }
}

但是，当使用这段代码时:

$("tag")[0].setAttribute('class','caroAnimp1')，没有任何反应。

无论我在什么标签上尝试这个，都没有任何反应。只有在应用了类并且在类更改时删除了设置时才会发生某些事情。

Answer 1

您可以使用 Jquery 来完成此操作:例如:

$(<myelement>).css('-webkit-transform', 'translateX(0px, 70px)');