将新字符添加到#messageCorrectrlyTyped范围时是否可以添加效果？那么当用户输入正确的字符时？我尝试将transition: all 1s;in设置为css，但它不起作用。你能帮助我吗？
var messageToType = document.querySelector("#messageToType");
var messageCorrectlyTyped = document.querySelector("#messageCorrectlyTyped");
var correctlyTyped = "";
document.addEventListener("keypress", function(e){
if (messageToType.textContent.length > 0) {
var charToPress = messageToType.textContent[0];
var charPressed = String.fromCharCode(e.keyCode);
if (charPressed === charToPress) {
messageToType.textContent = messageToType.textContent.substring(1);
messageCorrectlyTyped.textContent += charPressed;
messageCorrectlyTyped.style.color = "green";
}
}
});#messageToType {
font-family: "Courier New";
font-size: 20px;
font-weight: 700;
}
#messageCorrectlyTyped {
font-family: "Courier New";
font-size: 20px;
font-weight: 700;
}
#container {
margin: auto;
width: 50%;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title>Test Type</title>
<link rel="stylesheet" type="text/css" href="testType.css">
</head>
<body>
<div id="container">
<span id="messageCorrectlyTyped"></span><span id="messageToType">ciao</span>
</div>
<script type="text/javascript" src="testType.js"></script>
</body>
</html>这是一个非常广泛的问题。
这是一个例子，告诉我它是否适合你：
const hider = document.querySelector('.hider');
const width = hider.offsetWidth;
hider.style.left = '0px';
const inter = setInterval(() => {
let left = +hider.style.left.replace('px', '');
if(left <= width) {
hider.style.left = (left + 1) + 'px';
} else { clearInterval(inter); }
}, 5);.container {
position: relative;
}
.hider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin-right: -1px;
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 4%);
}<div class="container">
<div class="text">Lorem Ipsum Dolor Sit Amet</div>
<div class="hider"></div>
</div>