无法使用 jQuery 更改正文上的“动画持续时间”CSS答案

【问题标题】：Unable to change 'animation-duration' CSS on body with jQuery无法使用 jQuery 更改正文上的“动画持续时间”CSS
【发布时间】：2017-12-15 21:38:11
【问题描述】：

我在 body 元素上运行了一个 CSS 动画，它的默认持续时间为 20 秒。我希望能够通过用户输入来更改它，但我似乎无法让它工作。

我的默认 CSS 是：

body {    
    ...    
    animation: MoveBG 20s ease infinite;
}

如果我运行这个 jQuery 代码：

$('body').css('animation', 'MoveBG 2s ease infinite');

动画仍会有 20 秒的持续时间。有趣的是，如果我跑步：

alert($('body').css('animation-duration'));

它会告诉我动画持续时间是 2 秒（显然不是）。

// the animation duration should change to 2s, but it still animates at 20s
var animation = 'MoveBG 2s ease infinite';
$('body').css('animation', animation);

// it even says that it is animate at 2s
//alert($('body').css('animation-duration'));

body {
  background: linear-gradient(to right, #f00, #0f0, #00f);
  background-size: 600% 100%;
  -webkit-animation: MoveBG 20s ease infinite;
  -moz-animation: MoveBG 20s ease infinite;
  -o-animation: MoveBG 20s ease infinite;
  animation: MoveBG 20s ease infinite;
}

@-webkit-keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

@-moz-keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

@-o-keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

@keyframes MoveBG {
  0% {
    background-position: 0 0
  }
  50% {
    background-position: 100% 0
  }
  100% {
    background-position: 0 0
  }
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

Jsfiddle：http://jsfiddle.net/sdobc5vx/2/

谁能看到我做错了什么？

这在 Chrome 37 中发生在我身上 - 但它看起来在 Firefox 30 中工作。嗯...

【问题讨论】：

这对我也不起作用。此外，我很确定 jQuery 现在会自动添加供应商前缀。
似乎是帧刷新问题。如果您隐藏并显示帧刷新。 $('body').css('animation', animation).hide().show(0);jsfiddle.net/a5nv1hq3

标签： javascript html css animation

【解决方案1】：

不完全确定，但即使您覆盖已启动的关键帧，似乎帧刷新也不会发生，可能是 chrome 错误。

一个技巧是隐藏元素并（异步）显示它以进行重绘（但不希望闪烁）。

   $('body').css('animation', animation).hide().show(0);
                                                   //^__ Need this to force asyncronous show

var animation  = 'MoveBG 2s ease infinite';
$('body').css('animation', animation).hide().show(0); 
                                                //^___Asyncronously show

body {
    background: linear-gradient(to right, #f00, #0f0, #00f);
    background-size: 600% 100%;
    -webkit-animation: MoveBG 20s ease infinite;
    -moz-animation: MoveBG 20s ease infinite;
    -o-animation: MoveBG 20s ease infinite;
    animation: MoveBG 20s ease infinite;
    
}


@-webkit-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

@-moz-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@-o-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@keyframes MoveBG { 
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
</body>

这是另一个有效的技巧。将动画重置为无，然后再将其重新设置，这确实不会产生闪烁。

var animation  = 'MoveBG 2s ease infinite';
var $body = $('body').css('animation', 'none'); //reset it
setTimeout(function(){
    $body.css('animation', animation); //set it back
});

Demo2

您也可以对 addClass 使用相同的技巧。

【讨论】：

@DiscoInfiltrator 不客气.. :) 我真的很想知道这个问题的实际原因.. :(
是的，当然。我会考虑提交一份错误报告。
@DiscoInfiltrator 我什至尝试了硬件加速 (translate3d)，这对于桌面浏览器来说当然是不需要的，可以提高移动动画性能。但也没有运气..

【解决方案2】：

编辑、更新

尝试（解决方法）

var duration = "2s";
$("body")[0].style.WebkitAnimationDuration = duration;
$("style").detach().hide(function() {
  $("head").prepend(this);
});

$(function() {
var twenty = $(".twenty");
var two = $(".two");
var span = $("span");
    span.prepend("<b>twenty: </b>" 
                + window.getComputedStyle(twenty[0], null).WebkitAnimation 
                + " <b>before</b>" 
                + "<br><b>two: </b>" 
                + window.getComputedStyle(two[0], null).WebkitAnimation 
                + "<b> before</b>");
// the animation duration should change to 2s, but it still animates at 20s
var duration  =  "2s";
// $('body').css('animation', animation);
two[0].style.WebkitAnimationDuration = duration;
$("style").detach().hide(function() {
  $("head").prepend(this);
});
span.append("<br><b>twenty: </b>" 
           + window.getComputedStyle(twenty[0], null).WebkitAnimation 
           + " <b>after</b>" 
           + "<br><b>two: </b>" 
           + window.getComputedStyle(two[0], null).WebkitAnimation 
           + "<b> after</b>");
// it even says that it is animate at 2s
alert(two.css('animation-duration') 
     + "\n" 
     + window.getComputedStyle(two[0], null).webkitAnimationDuration);
});

span {
    font-size : 12px;
    height : 50px !important;
}
div.two {
    margin-left:20px;
}

div {
    display : inline-block;
    position : relative;
    width : 200px;
    height : 400px;
    background: linear-gradient(to right, #f00, #0f0, #00f);
    background-size: 600% 100%;
    -webkit-animation: MoveBG 20s ease infinite;
    -moz-animation: MoveBG 20s ease infinite;
    -o-animation: MoveBG 20s ease infinite;
    animation: MoveBG 20s ease infinite;
}

@-webkit-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

@-moz-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@-o-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@keyframes MoveBG { 
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
    <span class="animations"></span><br />
    <div class="twenty"></div><div class="two"></div>
</body>

jsfiddle http://jsfiddle.net/sdobc5vx/31/

【讨论】：

不幸的是，您所拥有的正是 OP 的示例所拥有的。它忽略了 2 秒的动画持续时间。
似乎在 chrome 37 不稳定时重置。很难以线性渐变的背景查看。并排创作以确认。谢谢

【解决方案3】：

我在 Safari 上试过了，效果很好。 Chrome 没有响应任何内容。

尝试这样做，看看是否会有所不同：

$('body').css({
    -webkit-animation: animation,
    -moz-animation: animation,
    -o-animation: animation,
    animation: animation,
});

【讨论】：