如何使用 javascript 创建自定义关键帧 css 动画

关键词：

【中文标题】如何使用 javascript 创建自定义关键帧 css 动画【英文标题】：How may I create custom keyframe css animation with javascript 【发布时间】：2012-04-04 08:42:39 【问题描述】：

我需要使用 javascript 创建和运行自定义 css3 动画。 当我需要创建过渡时，我会写如下内容：

element.style[Modernizr.prefixed('transform')] = 'rotateY(50deg)';

当我需要动画元素时我应该写

element.style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

但我不能以同样的方式为“打开”创建关键帧。 当然，我可能会写类似

document.creteElement("style").innerHTML = rule;

但这是一个肮脏的想法，所以在阅读programmatically changing webkit-transformation values in animation rules之后我写了这个：

var style = document.documentElement.appendChild(document.createElement("style")),
index = Modernizr._prefixes.length,
rule = "";

while(index--)
    rule+="@"+Modernizr._prefixes[index]+"keyframes 'test' 0%opacity:1; 50%opacity:0; 100%opacity:1; ";


style.sheet.insertRule(rule);
$(".mojo")[0].style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

​

并得到错误：未捕获的错误：SYNTAX_ERR: DOM Exception 12

我做错了什么，我该如何做更合适的方式？这看起来很可怕。

http://jsfiddle.net/silentimp/273e2/ — 测试

【问题讨论】：

jsfiddle.net/silentimp/273e2/1 — 解决方案 我非常喜欢这个解决方案。我希望看到它更进一步，也许可以抽象成一个函数，让您可以轻松访问您的CSSKeyframeRules，以允许即时获取/设置。 【参考方案1】：

var keyframes = "@-webkit-keyframes...";
var s = document.createElement( 'style' );
s.innerHTML = keyframes;

source

或

https://github.com/krazyjakee/jQuery-Keyframes

【讨论】：

得到如下错误：Failed to load resource: The requested URL was not found on this server. file:///Users/ks/Desktop/website/undefined

如何在 JavaScript 中“正确”创建自定义对象？

】如何在JavaScript中“正确”创建自定义对象？【英文标题】：Howto"properly"createacustomobjectinJavaScript?【发布时间】：2010-12-0809:53:44【问题描述】：我想知道创建具有属性和方法的JavaScript对象的最佳方法是什么。我见过一些... 查看详情

如何使用 jsDoc 在自定义组件中记录此关键字？

...0:17【问题描述】：我正在使用Vuejs内联模板组件，我们在javascript文件中注册组件，在html中注册模板。组件看起来像这样：Vue.component(\'compare-benefits\',data()//the" 查看详情

如何使用 AJV 创建自定义错误消息？

】如何使用AJV创建自定义错误消息？【英文标题】：HowtocreatecustomerrormessagesusingAJV?【发布时间】：2021-07-0409:02:47【问题描述】：我正在尝试将自定义错误消息添加到我的应用程序输入字段，但是当我尝试收到此错误时：错误：严... 查看详情

不使用 class 关键字创建自定义元素

】不使用class关键字创建自定义元素【英文标题】：Creatingcustomelementwithoutusingclasskeyword【发布时间】：2018-02-1417:41:54【问题描述】：这其实更多是关于ES6中面向对象模型的问题。不过，我将以创建新的自定义元素为例。因此，创... 查看详情

无法使用带有样式组件的关键帧设置嵌套动画的样式

】无法使用带有样式组件的关键帧设置嵌套动画的样式【英文标题】：Notabletostylenestedanimationswithkeyframeswithstyled-components【发布时间】：2019-11-0821:28:12【问题描述】：我正在使用带有条件样式的样式组件中的自定义动画为图像创... 查看详情

如何在 JavaScript 中自定义警报？

】如何在JavaScript中自定义警报？【英文标题】：HowcanIcustomizeanalertinJavaScript?【发布时间】：2020-05-1108:09:48【问题描述】：我在React中使用TypeScript。我想创建自定义警报并向其中添加图像。我用了这个方法：privatealert()alert("Thisisan... 查看详情

如何使用“IN”创建自定义 Spring JPA 查询？

】如何使用“IN”创建自定义SpringJPA查询？【英文标题】：HowdoyoucreateacustomSpringJPAqueryusing"IN"?【发布时间】：2019-09-2515:57:12【问题描述】：我有一个整数参数。我需要编写一个自定义SpringJPA查询，其中等效SQL将是。..ANDx.pr... 查看详情

如何使用 web sdk 为 quickblox 创建自定义对象？

...用Quickblox的WebSDK创建一个phonegapAndroid应用程序。如何使用JavaScript和JSON数组创建自定义对象？在我的架构中，我有以下字段：味精来自tom（js不允许）头像 查看详情

如何使用子节点创建自定义 React Native 组件

...des【发布时间】：2015-11-2219:13:46【问题描述】：我想用纯JavaScript创建一个ReactNative组件，由TouchableOpacity和Text等其他组件组成。我的应用中有几个按钮由这两个组件组成，所以我认为学习如何创建自己的组件以更好地重用 查看详情

动画的五个关键帧都有哪些？

...你可以用来在你的下一个项目中创造一些不一样的效果。如何制作关键帧动画在我们知道了关 查看详情

javascript自定义事件

javascript自定义事件Javascript中的事件包括click、mouseover、submit、change等等，它们分别在元素被点击、鼠标滑过、表单提交、域的内容改变时触发，那么自定义事件是如何定义和触发的？它有什么意义？如何定义？自定义事件创建... 查看详情

如何在 JavaScript 中为自定义对象创建方法？

】如何在JavaScript中为自定义对象创建方法？【英文标题】：HowdoyoucreateamethodforacustomobjectinJavaScript?【发布时间】：2010-10-0500:35:03【问题描述】：是不是……varobj=newObject();obj.function1=function()//code或者类似的？【问题讨论】：【参... 查看详情

如何在 jsPDF 中使用自定义字体来创建 pdf？

...布时间】：2014-08-2512:48:43【问题描述】：我正在尝试使用javascript创建一个简单的pdf文档。我找到了jsPDF，但我不知道如何使用“CALIBRI”字体文本。有可能吗？【问题讨论】：你是否在浏览器上将其渲染为calibri？【参考方案1】：... 查看详情

AVAssetWriter - 设置自定义帧率

...ession,didUpdateframe:ARFrame)请参阅下面用于编写图像的代码。如何根据需要设置自定义帧速率，例如24、 查看详情

如何在 Shopware 6 中创建可以在 Twig 文件中使用的自定义 Javascript？

】如何在Shopware6中创建可以在Twig文件中使用的自定义Javascript？【英文标题】：HowtocreateaCustomJavascriptinShopware6whichIcanuseinmyTwigfiles?【发布时间】：2020-12-0406:43:00【问题描述】：如何创建可以在模板上使用的自定义Javascript函数以及... 查看详情

animationwithmotionlayout(代码片段)

文章目录简介使用入门添加ConstraintLayout依赖将ConstraintLayout转为MotionLayout开始创建动画定义开始和结束动画定义过渡动画在Motion编辑器中预览动画图片变换KeyFrameSet定义关键帧位置关键帧KeyPositionparentRelativedeltaRelativepathRelative属性... 查看详情

如何在传递变量值的 JavaScript 中指定内联关键帧？

】如何在传递变量值的JavaScript中指定内联关键帧？【英文标题】：HowtospecifyinlinekeyframesinJavaScriptpassingavariablevalue?【发布时间】：2022-01-2022:22:32【问题描述】：我有各种不同大小的通知元素，我会在计时器后将它们向上和向外滑... 查看详情

使用 libjingle 在 Android 上使用“自定义”捕获器创建 WebRTC VideoTrack

...idwithlibjingle【发布时间】：2014-07-0211:52:55【问题描述】：如何使用“自定义”视频捕获器来创建VideoTrack并提供帧？创建VideoTrack的经典方法是：1-获取V 查看详情