我想要一个 div，它使用 vanilla javascript 执行以下操作:
- 完全淡出
- 更新新内容
- 新屏幕坐标的位置
- 淡入
取消也会中途淡出，因此如果用户快速单击按钮 20 次，它不会淡入/淡出 20 次，只是最近一次。
这是我现在的位置: https://jsfiddle.net/d685Ledu/
<body>
<div id="wrapper">
<p>Content content</p>
</div>
<button id="button">click me</button>
</body>
<script type="text/javascript">
var wrapper = document.getElementById('wrapper');
var fadeSpeed = 0.01;
document.getElementById('button').addEventListener('click', function(){
fadeOut();
updateDiv();
moveDiv();
fadeIn();
});
function updateDiv() {
wrapper.innerHTML= '<div>lots</div><div>of</div><div>new</div><div>content</div>';
}
function moveDiv() {
wrapper.style.top = '100px';
wrapper.style.left = '100px';
}
function fadeIn() {
var opacity = 0;
function increase() {
opacity += fadeSpeed;
if (opacity >= 1){
wrapper.style.opacity = 1;
return true;
}
wrapper.style.opacity = opacity;
requestAnimationFrame(increase);
}
increase();
}
function fadeOut() {
var opacity = 1;
function decrease() {
opacity -= fadeSpeed;
if (opacity <= 0){
wrapper.style.opacity = 0;
return true;
}
wrapper.style.opacity = opacity;
requestAnimationFrame(decrease);
}
decrease();
}
</script>
实现此目标最惯用的方法是什么？
最佳答案
如果您只是想更新特定的 div，则需要更新 margin-left 和 margin-right。
也就是说，将您的 moveDiv 函数更改为:
function moveDiv() {
wrapper.style["margin-left"]="100px";
wrapper.style["margin-top"]="100px";
}
正如我在第二条评论中所说，我强烈建议您研究一个框架。
关于javascript - 使用 vanilla Javascript 实现更新 DOM 元素的最佳方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34183680/