用香草Javascript更新DOM元素的最佳方法是什么？

Question

我想要一個使用香草javascript執行以下操作的div：

完全淡出
有新內容的更新
位置到新的屏幕坐標
淡入

取消也會在途中逐漸消失，因此，如果用戶快速單擊一個按鈕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>

實現這一目標的最慣用的方法是什么？

Answer 1

如果您只是嘗試更新特定的div，則需要更新margin-left和margin-right 。

話雖如此，將您的moveDiv函數更改為：

 function moveDiv() {   
  wrapper.style["margin-left"]="100px";
  wrapper.style["margin-top"]="100px";
}

就像我在第二條評論中所說的那樣，我強烈建議您研究一下框架。

小提琴。

用香草Javascript更新DOM元素的最佳方法是什么？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-12-09 16:51:07

用香草Javascript更新DOM元素的最佳方法是什么？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-12-09 16:51:07

解決方案1
0 已采納 2015-12-09 16:51:07