- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
我有一段 JS 代码来生成随机数并将它们输出为变量,以在此处使用以代替旋转值
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}
上面的代码工作正常,但是当我尝试将变量从 javascript 粘贴到 rotate(variable);
时,我无法让它工作。我是新手,所以我 90% 确定我只是没有正确的变量语法(说真的,我很难记住是否需要括号、引号、波浪形等等,我已经尝试了所有我能想到的) .
或者可能是因为该变量是函数的局部变量,而 CSS 无法读取它。
所以基本上我只需要一些陌生人告诉我正确的语法以及如何让 CSS 在可能的情况下读取变量。
否则看起来我需要这个函数来创建整个:
@-webkit-keyframes rotate {
0% {-webkit-transform: rotate(-10deg);}
100% {-webkit-transform: rotate(10deg);}
}
...这可能有点困惑,因为随机变量可能会应用于多个 css 元素。
哦,目前变量的格式是在数字后面包含 deg
,所以这不是问题所在。事实上,为了简单起见,假设我使用的是 var dogValue = "20deg";忘记随机元素。
谢谢。
最佳答案
好吧,不是您实际代码的样子,但是您不能将 JavaScript 变量放入 CSS,它不会识别它们。
相反,您需要通过 JavaScript 创建 CSS 规则并将它们插入 CSSOM(CSS 对象模型)。这可以通过几种方式完成——您可以只创建一个关键帧动画并将其添加进去,也可以覆盖现有动画。出于这个问题的原因,我假设您想用不同的旋转值不断覆盖现有的关键帧动画。
我整理(并记录了)一个 JSFiddle 供您查看:http://jsfiddle.net/russelluresti/RHhBz/2/
它开始运行 -10 -> 10 度的旋转动画,但随后您可以单击按钮让它在随机值(-360 到 360 度之间)之间执行旋转。
这个例子主要是从 Simon Hausmann 所做的早期实验中拼凑而成的。您可以在此处查看来源:http://www.gitorious.org/~simon/qtwebkit/simons-clone/blobs/ceaa977f87947290fa2d063861f90c820417827f/LayoutTests/animations/change-keyframes.html (只要该链接有效,gitorious 就很难维护 url)。
我还从这里获取了 randomFromTo JavaScript 函数代码:http://www.admixweb.com/2010/08/24/javascript-tip-get-a-random-number-between-two-integers/
我已将文档添加到我从他那里获取的 Simon Hausmann 脚本的部分(尽管我对它们进行了轻微修改)。我还使用 jQuery 将点击事件附加到我的按钮——所有其他脚本都是用原生 JavaScript 编写的。
我已经在 Chrome 18 和 Safari 5.1 上对此进行了测试,它似乎在这两种浏览器中都运行良好。
希望这对您有所帮助。
关于javascript - 使用 Javascript 变量设置 Webkit 关键帧值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10342494/
如果我需要检测 Firefox,我使用了以下代码: var firefox = !(window.mozInnerScreenX == null); 我很好奇是否有类似的东西可以在不检查用户代理字符串
我正在开发我的第一个Windows窗体应用程序以使用WebKit.Net。我需要连接到https站点并弹出身份验证表单。使用.Net内置的浏览器,身份验证表单会自动弹出,但是WebKit只是将我放到4
就像您可以将 -webkit-gradient 添加到 -webkit-box-reflect 一样,您可以对反射执行转换吗?我正在反射的图像有一个 Angular ,我想尝试旋转反射或稍微倾斜它以使
我有一个加载一些网页的 QWebView,但是当鼠标被按下并拖动时的问题是它选择了所有阻碍它的东西。 有什么办法可以摆脱这个吗??我不想选择文本和其他项目。, 如果我限制 mouseMove 和 mo
我对编程和创建程序真的很陌生。最近我在浏览 iTunes 文件夹时看到了一个 .css 文件。我打开它,看到很多 -webkit 样式来设置界面样式。 我可以使用 webkit 来设置 C++、.NE
这个问题在这里已经有了答案: How do I fix inconsistent Textarea bottom margin in Firefox and Chrome? (4 个回答) 4年前关闭
我希望自定义webkit-scrollbar为悬停状态设置不同的背景颜色动画。下面的代码在悬停时更改颜色,但不设置任何动画。它可以在div上运行,所以我怀疑webkit-scrollbar在过渡时效果
我正在尝试评估 WebKit 补丁的可能性,该补丁将允许所有渲染的图形渲染到完全透明的背景上。 想要的效果是呈现完全没有任何背景的 Web 内容,它应该看起来漂浮在桌面上(或浏览器窗口后面显示的任何内
这是 HTML 代码: A B C 这是 CSS 代码: .row { line-height:0;} .item { line-hei
我经常看到这样的 css 动画代码: @-webkit-keyframes anim{ 0{ -webkit-transform: perspective(400px) rotate3d(
我想为元素的 -webkit-transform: rotateX() 设置动画,同时允许元素保持其 -webkit-transform: rotate() 属性不变。考虑以下代码: @-webkit
CSS3 规则带来了许多有趣的特性。 取border-radius , 例如。该标准规定,如果您编写此规则: div.rounded-corners { border-radius: 5px; }
我在想: 有没有人考虑过为嵌入式 Javafx 2.0 Webkit 浏览器或新的 QT5 - Webkit 实现 webdriver-interface。 有人对朝着这个方向发展的一些 Github
我正在尝试使用 WebKit 创建 Vala 程序。这是我编译它的方式: valac --pkg gtk+-3.0 --pkg granite --pkg glib-2.0 --pkg webkitg
我刚刚开始使用 webkit,我想先自己执行构建。我对如何使用 nightly sources of webkit 进行编译有点困惑。主 webkit 站点上的构建说明说要使用整个 SVN 树来执行完
我在做一些我认为很简单的事情时遇到了问题。读取输入字段的值,然后将该值写入文本文件。我得到它的工作,但只是部分和不一致。发生的情况是,文本 a) 被截断(并非所有在该字段中输入的数据都写入文件)和 b
我在使用 -webkit-animation 时遇到内存问题。 原则 我想为渐变背景制作动画。由于它们在关键帧中不可设置动画,我将每个背景放在不同的 div 中,并且我正在使用那些 div 不透明度和
困境: 在我的 CSS 文件中,我有这个: div { -webkit-transform: scale(0.5); } 在我的 jQuery 中,我稍后会这样做: $('div).css('
我正在尝试构建网络爬虫。 我需要两件事: 将 HTML 转换为 DOM 对象。 按需执行现有的 JavaScript。我期望的结果是一个 DOM 对象,其中执行加载的 JavaScript 已经执行。
似乎在元素上应用 webkit-transform 属性,或者它的父元素具有 webkit-over-flowing-scrolling: touch 完全打破了滚动中的滚动根本不起作用。 有没有人遇
我是一名优秀的程序员,十分优秀!