改变或产生，然后删除一个关键帧CSS3 [英] Alter or generate and then remove a css3 keyframe

问题描述

我目前正在与煎茶的项目。在这个项目中，我有一个旋转的wheeloffortune'轮子旋转的车轮中的某一部分，让您的奖金。

I'm currently working on a project with sencha. In this project i have a rotating 'wheeloffortune' wheel that spins to a certain part of the wheel to get your bonus.

我这样做是有一些JavaScript在那里我创建间隔切换css类的div之前，但没有很好地工作。

I did this before with some javascript where i created intervals to switch the css class of the div but that didn't work well.

我现在想用CSS3动画，我有以下CSS来做到这一点：

I now want to do it with css3 animation for which i have the following css:

    @-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;
}

但我需要它旋转到一定角度，是可变的。为此，我需要能够设置

But i need to spin it to a certain angle which is variable. therefor i need to be able to set the

to {
    -webkit-transform: rotate(3600deg);
}

部分的度可变数量在我的类添加到div

part to a variable number of degrees before i add the class to the div

这是如何做到这一点任何想法？

Any idea on how to do this ?

推荐答案

使用的CSSOM：的http：/ /dev.w3.org/csswg/cssom/

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');
};

一旦你知道到底度是什么，它​​传递给这个函数。它会抢最后一个样式表文档中，创建插入动态度的规则，然后插入到规则的样式表，并添加适当的类的元素，以便它使用的动画。

Once you know what the end degree is, pass it to this function. It will grab the last stylesheet in your document, create a rule with the dynamic degree plugged in, and then inserts the rule into the stylesheet and adds the proper class to your element so it uses the animation.

该webkitAnimationEnd监听器那里从样式表删除的规则，一旦完成动画这样的规则并不不断建立和还删除webkitAnimationEnd监听器本身，因此它不会与下一个自旋产生干扰。

The webkitAnimationEnd listener is there to remove the rule from the stylesheet once the animation finishes so the rules don't continuously build up and also removes the webkitAnimationEnd listener itself so it doesn't interfere with the next spin.

这篇关于改变或产生，然后删除一个关键帧CSS3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！