Можно ли использовать переход CSS3 для анимации значения метки-метки?

Question

Возможно ли с помощью css только анимировать визуальное изменение метра / индикатора прогресса, если значение изменилось?

Что-то вроде этого

-webkit-transition: all 1s linear;

Или

-webkit-transition: meter-value 1s linear;

Answer 1

Да, это вполне возможно, потому что WebKit использует Shadow DOM для материализации элемента счетчика вместо системного по умолчанию (так что индикатор и индикатор выполнения могут быть стилизованы).Вы можете изобразить это как скрытый контент внутри элемента метра:

<div pseudo="-webkit-meter-inner-element">
    <div pseudo="-webkit-meter-bar">
        <div pseudo="-webkit-meter-optimum-value" style="width: 46%;"></div>
    </div>
</div>

Когда вы измените значение своего метра, WebKit изменит ширину последнего элемента div.Так что с:

meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
    transition: 1s width;
}

Вы можете анимировать свой счетчик.

Answer 2

Нет, CSS предназначен только для изменения представления страницы, в то время как значение является частью содержимого страницы и должно указываться либо непосредственно в HTML, либо изменяться с помощью JavaScript.

Редактировать: Я немного неправильно понял ваш вопрос, но ответ остался прежним. CSS-переходы предназначены только для анимации свойств CSS, и получить доступ к значению элемента из CSS невозможно.

Answer 3

Нет, это невозможно, поскольку это свойство не поддерживается как transition-property. Доказательство: w3.org