2

JS (jQuery) を使用して HTML5 <progress>-Bar の遷移時間を調整する必要がありますが、これを行う jQuery で適切なセレクターが見つかりません。

私の現在の試み：

CSS:

progress::-webkit-progress-value {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s; /* Works like a charm */
}

JavaScript(成功しない):

// These lines do nothing when the progress value changes:
$(".progressSelectorClass[progress-value]").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass > *").css({"-webkit-transition" : "all 6s"}); 
$(".progressSelectorClass").css({"-webkit-transition" : "all 6s"});

// This gets an error:
$(".progressSelectorClass::-webkit-progress-value").css({"-webkit-transition" : "all 6s"});

progress::-webkit-progress-valueJavaScript で (jQuery の有無にかかわらず)を選択する機会はありますか?

このjsFiddleでは、私がやろうとしていることをより明確に見ることができます: http://jsfiddle.net/rD5Mc/1/

アップデート：

-element にdata-animation-timeパラメーターを追加/変更することで醜い回避策で効果を得て、次のようないくつかの css-classes を作成しました。<progress>

progress[data-animation-time="5"]::-webkit-progress-value { -webkit-transition: all 5s; }
progress[data-animation-time="10"]::-webkit-progress-value {    -webkit-transition: all 10s;    }
progress[data-animation-time="15"]::-webkit-progress-value {    -webkit-transition: all 15s;    }
progress[data-animation-time="20"]::-webkit-progress-value {    -webkit-transition: all 20s;    }
progress[data-animation-time="25"]::-webkit-progress-value {    -webkit-transition: all 25s;    }
...

それは機能しますが、私は自分のソリューションに非常に不満です。もっと良い方法があるはず...

4

2 に答える 2

3

JavaScript を使用して CSS ルールを変更できます。

var rule;

$(".animationtimeFirst").change(function() {
    time = $(this).val();


    // Write out out full CSS selector + declaration
    s = '.progressselector::-webkit-progress-value { -webkit-transition: all ' + time + 's; }';

    // Check the rules
    // If there's no rules,
    if ((!rule && rule !== 0) || !document.styleSheets[0].cssRules.length) {
        // Make one! -- Insert our CSS string into the page stylesheet
        rule = document.styleSheets[0].insertRule(s, 0);
        // I think this code is different in IE, beware!
        console.log('Our rule is #' + rule);
    } else {
    // If we already have a rule we can change the style we've implement for the psuedo class
    document.styleSheets[0].rules[rule].style.webkitTransitionDuration = time.toString() + 's';
    }
});

更新されたフィドルは次のとおりです: http://jsfiddle.net/trolleymusic/MHYY8/3/ -- お役に立てば幸いです:)

于 2013-04-19T23:32:28.220 に答える
0

progress::-webkit-progress-valueDOM 要素ではありません (ただし、Shadow DOM の一部です)。したがって、jQuery やその他の DOM メソッドでアクセスすることはできません。

それはすべてあなたのような回避策になります。

編集：

Chrome の最近のバージョンでは、プロパティを使用して実際に Shadow DOM にアクセスできることがわかりましたwebkitShadowRoot。残念ながら、要素には機能しません<progress />。

于 2013-04-24T21:51:22.373 に答える