javascript - 使用javascript更改css中的动画属性

Question

在 css 文件中设置动画属性后如何更改它？

这是我的CSS:

#ManSprite{
    overflow:hidden;
    width:200px;
    height:200px;
    position:absolute;
    top:280px;
    left:140px;
    background-image: url("images/ManSprite.png");
    z-index:99;
    animation: play .4s steps(2) infinite;
    -webkit-animation: play .4s steps(2) infinite;
    -moz-animation: play .4s steps(2) infinite;
    -ms-animation: play .4s steps(2) infinite;
    -o-animation: play .4s steps(2) infinite;
}

@keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-webkit-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

我已经使用了这两种方法来尝试更改所需的步数。

var ss = document.styleSheets[0];

for(var i =0;i<ss.cssRules.length;i++){
    if(ss.cssRules[i].selectorText === "#ManSprite"){
        ss.cssRules[i].styles.animation = "play .4s steps("+stepsArray[StoryPart]+") infinite";
        ss.cssRules[i].styles.MozAnimation = "play .4s steps("+stepsArray[StoryPart]+") infinite";
        break;
    }
}

我用过

var steps = stepsArray[StoryPart];
$('ManSprite').css({"animation": "play .4s steps("+steps+") infinite",
                        "-webkit-animation": "play .4s steps("+steps+") infinite" ,
                        "-moz-animation": "play .4s steps("+steps+") infinite",
                        "-ms-animation": "play .4s steps("+steps+") infinite",
                        "-o-animation": "play .4s steps("+steps+") infinite"});

但它们都无法改变我在动画中需要的步数。

Answer 1

我不知道 steps(2) 是干什么用的——你可能应该只改变 .css() 方法中的这个元素……但是无论你想在 css 中指定的动画中改变什么，你都需要重置你的动画- 尝试这样做:

css(仅将“#ManSprite”更改为“.animation”):

.animation{
  overflow:hidden;
  width:200px;
  height:200px;
  position:absolute;
  top:280px;
  left:140px;
  background-image: url("images/ManSprite.png");
  z-index:99;
  animation: play .4s steps(2) infinite;
  -webkit-animation: play .4s steps(2) infinite;
  -moz-animation: play .4s steps(2) infinite;
  -ms-animation: play .4s steps(2) infinite;
  -o-animation: play .4s steps(2) infinite;
}

@keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

@-webkit-keyframes play {
   from { background-position: -200px; }
     to { background-position: -600px; }
}

开始动画:

$('#ManSprite').addClass('animation');

改变动画:

$('#ManSprite').removeClass('animation').css(
    'animation-timing-function','steps('+steps+')' );
$('#ManSprite').addClass('animation');

它现在可以工作了。