Javascript 更改或生成并删除css3关键帧
我目前正在与sencha合作一个项目。在这个项目中,我有一个旋转的“幸运之轮”轮子,它旋转到轮子的某个部分来获得你的奖金 我之前用一些javascript做过这件事,在那里我创建了间隔来切换div的css类,但是效果不好 我现在想用css3动画来实现它,我有以下css:Javascript 更改或生成并删除css3关键帧,javascript,css,animation,webkit,Javascript,Css,Animation,Webkit,我目前正在与sencha合作一个项目。在这个项目中,我有一个旋转的“幸运之轮”轮子,它旋转到轮子的某个部分来获得你的奖金 我之前用一些javascript做过这件事,在那里我创建了间隔来切换div的css类,但是效果不好 我现在想用css3动画来实现它,我有以下css: @-webkit-keyframes rotater { from { -webkit-transform: rotate(0deg); } to { -webki
@-webkit-keyframes rotater {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(3600deg);
}
}
.css3-rotaterFull {
-webkit-animation-name: rotater;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:ease-out;
-webkit-animation-duration: 15s;
}
但我需要把它旋转到一个可变的角度。因此,我需要能够设置
to {
-webkit-transform: rotate(3600deg);
}
在我将类添加到div之前,将part设置为可变度数
有什么办法吗?使用CSSOM:
一旦知道结束度是什么,就将其传递给此函数。它将获取文档中的最后一个样式表,创建一个插入动态度的规则,然后将规则插入样式表,并将适当的类添加到元素中,以便使用动画
webkitAnimationEnd监听器用于在动画完成后从样式表中删除规则,这样规则就不会不断累积,同时也会删除webkitAnimationEnd监听器本身,这样它就不会干扰下一次旋转。将其放入样式标记中,以便能够使用getElementById.innerHTML;获取/设置它
function rotate(deg) {
var elem = document.getElementById('wheel');
var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1];
var rule = '@-webkit-keyframes menuBreadcrumbAnimation {\
0% {\
-webkit-transform: rotate(0deg);\
} 100% {\
-webkit-transform: rotate(' + deg + 'deg);\
}';
function rotateAnimationEnd() {
lastStyleSheet.removeRule(lastStyleSheet.length);
elem.removeEventListener('webkitAnimationEnd', rotateAnimationEnd, false);
};
lastStyleSheet.insertRule(rule, lastStyleSheet.rules.length);
elem.addEventListener('webkitAnimationEnd', rotateAnimationEnd, false);
elem.classList.add('css3-rotaterFull');
};