无法在“元素”上执行“动画”：不支持部分关键帧

Posted 2023-05-08

【中文标题】无法在“元素”上执行“动画”：不支持部分关键帧

【英文标题】：Failed to execute 'animate' on 'Element': Partial keyframes are not supported

【发布时间】：2016-11-17 12:09:13

【问题描述】：

我尝试使用 jquery 向 div 添加动画：

$('#footer').animate( "width" : "13%" ,1000);

它可以工作，但控制台中显示错误，例如：

“未能在‘元素’上执行‘动画’：不支持部分关键帧。”

当我点击正确的链接时：

但是当我使用像素值时，没有错误：

$('#footer').animate( "width" : 68 ,1000);

有没有使用响应式值的解决方案？

【问题讨论】：

我遇到了类似的情况，我认为 chrome 的 marquee 标记存在错误。希望这有助于jsfiddle

【参考方案1】：

问题在于您调用.animate() 的方式。您已将 jQuery 添加到您的代码库中，但您使用 web platform's animate 的方式与您调用 .animate() 的方式相同。如果您希望它与 jQuery 一起正常工作，请更改：

var player = this.move_.animate();

到

var player = $(this.move_).animate();

但是如果你想通过 jQuery 使用 javascript 动画，那么你可以拥有这个

var player = this.move_.animate(transform: [parameters.transformBegin, parameters.transformEnd]);

我不知道您的参数是什么，但我的示例显示您将多个关键帧作为数组添加为您正在制作动画的每个属性

【参考方案2】：

你掉进了陷阱。你使用的$不是jQuery，而是控制台的API，是document.querySelector的快捷方式

这意味着$('#footer') 不返回一个 jQuery 对象，而是一个普通的 DOM 元素。

这意味着.animate不是jQuery的方法而是元素的方法，所以你在不知不觉中使用了Web Animation API，而不是jQuery.animate。

他们有不同的 API，你会得到错误。

简而言之，确保 jQuery 在您的页面上可用和/或使用 jQuery('#footer').animate(et cetera)

【参考方案3】：

在这里工作正常：jsfiddle 没有错误

css：

#footer 
  width:100%;
  height:100px;
  background:red;

我认为您会收到该错误（“无法在“元素”上执行“动画”：不支持部分关键帧。”）因为您要操作的元素（#footer）没有给定特定大小动画前

只需给#footer 一个width（在CSS 或内联中），应该可以正常工作

如果有帮助请告诉我

【讨论】：

感谢您的帮助。我在 jsfiddle 中做一个例子来显示错误。像这样问题会更清楚。

问题出在“htmlMarqueeElement”，如此链接中“terje”的评论中所述：forums.vtiger.com/index.php?p=/discussion/175827/…

好吧。没有可以复制该错误的具体示例..我帮不了你..