2

我需要<progress>使用 JS (jQuery) 调整 HTML5 -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-valuein JavaScript（有或没有 jQuery）？

在这个 jsFiddle 你会更清楚地看到我试图做什么：http: //jsfiddle.net/rD5Mc/1/

更新：

我通过向 -element 添加/更改data-animation-time参数<progress>并创建了几个像这样的 css-classes 得到了一个丑陋的解决方法的效果：

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-value不是 DOM 元素（不过它是 Shadow DOM 的一部分）。所以你不能用 jQuery 或任何 DOM 方法来访问它。

这一切都归结为像您这样的解决方法。

编辑：

事实证明，在最新版本的 Chrome 中，您实际上可以使用该webkitShadowRoot属性访问 Shadow DOM。不幸的是，它不适用于<progress />元素。

于 2013-04-24T21:51:22.373 回答