0

タイムバーのような css3 アニメーションを作成しました。タイムバーが終了する (またはアニメーションが終了する) と、プレイヤーは使用するスキルを選択できるようになります。

私が現在抱えている問題は、CSS アニメーションに短いコードを使用しているため、具体的に時間をターゲットにして自由に変更するオプションを提供するコードを作成することです。

function timeBar (el, color) {
    var elem = document.getElementById(el);
    elem.style.transition = "width 6.0s, linear 0s";
    elem.style.background = color;
    elem.style.width = "0px";
}

ご覧のとおり、バーは 6 秒でいっぱいになりますが、その時間だけを具体的にターゲットにして変更し、残りの短針をそのままにしておくコードを作成するにはどうすればよいでしょうか? timestop や timeslow などの他のスキルに影響を与えたいので、質問しています。

JQuery に感謝しますが、私はそれを使わずにこれを実行しようとしていますが、まだ JavaScript を学習しています。

4

1 に答える 1

1

elem.style["transition-duration"]

おそらく変更したいプロパティです。「-webkit-transition-duration」など、これを可能な限りクロスブラウザーとして機能させるには、プレフィックスを使用する必要があることに注意してください。

また、必要に応じて、それを行うための優れた jQuery プラグインもあります: http://ricostacruz.com/jquery.transit/

編集：質問が（誤って）jQueryでタグ付けされていたため、最初にjQueryの提案を入れましたが、もちろん、記載されたプロパティを直接変更することもできます。

于 2013-10-13T19:43:36.243 に答える