我可以生产
-webkit-animation-name:mymove;
动态地
object.style.animationName="mymove"
但是否有可能产生类似的东西
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
用JS动态？
问问题
10625 次
5 回答
4
是的，我使用 Jquery 库，然后像这样应用：
说在这种情况下，我希望左值是来自属性类值 =“push”的 div 的动态值
<!--HTML-->
<div class="push">Wall</div>
//--JS--
var KeyFrame =
{
init: function(){
if(!KeyFrame.check)
{
//get the left position
var pushLeft = $('.push').position().left;
//set the style and append to head
var css = $('<style>@keyframes mymove{from {left:0px;}to {left:'+pushLeft+'px;}}</style>').appendTo('head'); //make sure you don't carriage return the css inline statement, or else it'll be error as ILLEGAL
//so u don't keep appending style to head
KeyFrame.check = true;
}
}
}
KeyFrame.init();
于 2013-07-24T16:31:56.367 回答
3
考虑如何访问样式表的想法......
document.styleSheets[0].insertRule(animationRule)
做好肯定会很复杂，所以简而言之，您希望保留一个链接并更改与每个对象相关联的规则或其他东西以避免混乱。或者，您可以尝试运行一种带有时间戳的垃圾收集形式或其他东西，以确定何时可以删除旧的。
通过快速查找我发现的其他链接... http://davidwalsh.name/add-rules-stylesheets
删除规则
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/deleteRule
insertRule（addRule 优先，因此更可靠）
http://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
我现在还注意到其他可能有用的东西......
http://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
实际上，这看起来像是一种更清晰的理解，或者至少是另一种方式。
http://blog.joelambert.co.uk/2011/09/07/accessing-modifying-css3-animations-with-javascript/
于 2013-10-22T08:35:47.303 回答
1
好的，如果我理解正确，这个jsfiddle应该可以解决问题。
它使用一组预定义的转换属性，并通过 jquery 动态更改值。
定义这些动画的语法如下...
transition-property: prop1, prop2, prop3;
transition-duration: timing1, timing2, timing3;
transition-timing-function: ease1, ease2, ease3;
通过这样做，您几乎可以使用@keyframes 实现所有功能（不是全部，但肯定是相当数量），它恰好内置在元素样式中。从这里您可以继续通过 jquery 更改您想要的任何内容。如果它的移动量你可以做类似的事情......
$("#myElem").css("left", "50px");
css3 过渡将负责其余的工作。如果它类似于更改轻松类型，您也可以使用...
$("#myElem").css("transition-timing-function", "linear");
我知道这不是您想要的，但它很可能会成功。
于 2013-04-26T01:50:46.987 回答
0
看起来您好像对 css3 关键帧有所了解。我推荐使用jQuery.Keyframes来生成关键帧，你也可以将事件和回调附加到动画中。
于 2014-06-17T13:00:06.467 回答
0
是的，您可以，当您编写 javascript 代码时，您使用 setAttribute() 函数与 style() 函数，这样您就可以包含一种以上的样式。只需插入动画名称、动画持续时间、动画定时功能或您希望的任何其他类型。
<!DOCTYPE html>
<html>
<head>
<title> Welcome </title>
<meta charset = "utf-8">
<style>
@keyframes appear-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#landing-page {
width: 100%;
height: 1000px;
}
</style>
<script>
window.addEventListener('load', function(){setTimeout(renderService, 1000)});
function renderService(){
var server = document.getElementById('Services');
server.setAttribute("style", "animation-name: appear-in; animation-duration: 5s; animation-timing-function: ease-in; background-image: url('https://wallpaperaccess.com/full/949819.jpg'); background-size: 80% 100%; background-position: center");
}
</script>
</head>
<body>
<div id = "landing-page">
</div>
</body>
</html>
于 2019-07-12T17:20:57.413 回答