如何在負載時啟動計數器？我能夠讓它在懸停時啟動，但從來沒有讓它在負載時作業。
JS：
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var start= rootStyles.getPropertyValue('--start');
var finish= rootStyles.getPropertyValue('--finish');
//function witch gives data for this values
root.style.setProperty('--start', storedelo-300);
root.style.setProperty('--finish', storedelo);
CSS：
:root {
--start: 0;
--finish: 0;
}
@property --num {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
div {
transition: --num 5s;
--num: var(--start);
counter-set: num var(--num);
}
div::after {
content: counter(num);
}
div::hover {
--num: var(--finish);
}
并且@keyframes 不適用于某些原因
@keyframes counter {
from {
--num: var(--start);
}
to {
--num: var(--finish);
}
}
uj5u.com熱心網友回復：
您可以創建一個函式來設定初始 CSS 變數值，然后在視窗DOMContentLoaded （MDN 檔案）或視窗load MDN 檔案中呼叫它
var root = document.querySelector(":root");
var rootStyles = getComputedStyle(root);
var start = rootStyles.getPropertyValue("--start");
var finish = rootStyles.getPropertyValue("--finish");
//function witch gives data for this values
function startCounter() {
root.style.setProperty("--start", storedelo - 300);
root.style.setProperty("--finish", storedelo);
}
window.addEventListener("DOMContentLoaded", (event) => {
startCounter();
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/459092.html
標籤：javascript css 动画片 文本 柜台
上一篇：如何按需創建影片控制器
下一篇：在輸出檔案中添加檔案名