我编写了一个程序，提示用户输入温度，并将该温度反映在垂直条上，我已将垂直条设置为动画，以根据给定的值更改高度。我遇到的奇怪问题是它不起作用，但如果我在输入值后重新保存 style.css 文件，它就会按预期工作。从那里开始，如果我输入后续值，它将跳到预期高度，同时完全跳过动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<div class="temp-container">
<div class="temp-indicator" id="indicator-1"></div>
</div>
<button onclick="changeTemp()">ENTER TEMP</button>
</div>
</body>
</html>
:root {
--temp-start: 0%;
--temp-end: 0%;
}
.wrapper{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
}
.temp-container {
width: 50px;
height: 500px;
margin: 50px 0px;
background: black;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 25px;
}
.temp-indicator {
width: 100%;
mask:linear-gradient(#fff 0 0);
border-radius: 25px;
}
.slide-to-temp {
animation: slideToTemp 1s forwards;
}
@keyframes slideToTemp {
from {height: var(--temp-start);}
to {height: var(--temp-end);}
}
.temp-indicator::before {
content:"";
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image: linear-gradient(red, lightblue 75%);
}
#indicator-1 {
height: var(--temp-start);
}
button {
padding: 20px;
font-size: 20px;
font-weight: 800;
border: 5px solid black;
}
let indicator = document.getElementById("indicator-1");
let root = document.documentElement;
function changeTemp() {
let inputTemp = prompt("Enter a temp:");
root.style.setProperty("--temp-end", `${inputTemp * 2}%`);
indicator.classList.add("slide-to-temp");
}
逻辑似乎成立，但显然我遗漏了一些东西。任何帮助将不胜感激。
只需更改
--temp-start: 1%; --temp-end: 1%; let indicator = document.getElementById("indicator-1");
let root = document.documentElement;
function changeTemp() {
let inputTemp = prompt("Enter a temp:");
root.style.setProperty("--temp-end", `${inputTemp * 2}%`);
indicator.classList.add("slide-to-temp");
} :root {
--temp-start: 1%;
--temp-end: 1%;
}
.wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
}
.temp-container {
width: 50px;
height: 500px;
margin: 50px 0px;
background: black;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
border-radius: 25px;
}
.temp-indicator {
width: 100%;
mask: linear-gradient(#fff 0 0);
border-radius: 25px;
}
.slide-to-temp {
animation: slideToTemp 1s forwards;
}
@keyframes slideToTemp {
from {
height: var(--temp-start);
}
to {
height: var(--temp-end);
}
}
.temp-indicator::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(red, lightblue 75%);
}
#indicator-1 {
height: var(--temp-start);
}
button {
padding: 20px;
font-size: 20px;
font-weight: 800;
border: 5px solid black;
}<div class="wrapper">
<div class="temp-container">
<div class="temp-indicator" id="indicator-1"></div>
</div>
<button onclick="changeTemp()">ENTER TEMP</button>
</div>