MutationObserver

Question

我有一个单页的html应用程序。只有一个thml文件有多个DIV，单击相关按钮时会显示/隐藏。

我在其中一个DIV上使用了一些动画（不在＆＃34;第一页DIV和＃34;）。问题是动画在加载html文档时直接启动，然后我用动画转到那个div，动画已经结束。

我的问题是：如何在动画显示DIV时启动动画？

这是代码：

<!DOCTYPE html>
<html>
<head>
<script>
function show(shown, hidden) {
  document.getElementById(shown).style.display='block';
  document.getElementById(hidden).style.display='none';
  return false;
}
</script>
<script>
function myFunction()
{
    var o, qt=[
        ["a","b","c"],
        ["d","e","f"],
        ["g","h","i"]];

    o=document.getElementById("quote1");
    o.innerHTML="";
    for(var i=1;i<4;i++)
        o.innerHTML+="<p id=\"quote1_"+i+"\" style=\"font-size: 28pt;\">&nbsp;</p>";

    var q=qt[Math.floor(Math.random() * qt.length)];
    document.getElementById("quote1_1").innerHTML=q[0];
    setTimeout(function() { document.getElementById("quote1_2").innerHTML=q[1]; }, 2000);
    setTimeout(function() { document.getElementById("quote1_3").innerHTML=q[2]; }, 3000);
}

window.onload = function(){
   myFunction();
}
</script>
</head>

<body>
<div id="Page1">
<div data-role="page">
<div data-role="content">
<center>
<a href="#" onclick="return show('Page2','Page1');">SHOW ANIMATION</a>
</center>
</div>
</div>
</div>




<div id="Page2" style="display:none">
<div data-role="page" id="main">
<div data-role="content">
<center>
<div id="quote1"></div>
<center>
<a href="#" onclick="myFunction()">Next</a>
</center>
</center>
</div>
</div>
</div>
</body>
</html>

Answer 1

使用纯JavaScript，您可以使用MutationObserver。然而，使用angularjs或knockoutjs等库应该更简单。我认为MutationObserver非常复杂。当MutationObserver不存在时，一种方法是跟踪对象创建。在dom中创建对象时，可以触发回调。这种方法唯一的大问题是它不能用于未明确跟踪的dom更改。 MutationObserver将通过用户交互捕获对DOM的任何更改。

在您的情况下，一个简单的解决方案是在将其添加到dom后立即执行。

类似的东西：

function changeElement(target, source, callback) {
  target.innerHTML = source;
  setTimeout(function() {
    callback(target);
  }, 0);
}

setTimeout(function() {
    changeElement(document.getElementById("quote1_2"), q[1], function (parent) {
       // code here
    }
}, 2000);

您还可以将上面的功能更改为已包含setTimeout以使其更清晰。

function changeElement(target, source, callback, wait) {
  setTimeout(function() {
    target.innerHTML = source;
    setTimeout(function() {
      callback(target);
    }, 0);
  }, wait);
}

changeElement(document.getElementById("quote1_2"), q[1], function (parent) {
  // code here
}, 2000);

带{0的setTimeout是为了确保在innerHTML更新后执行代码。如果直接执行回调，dom将不会在回调中可用。

至于动画，你应该看看css3过渡。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions动画可以通过缓慢修改不透明度来完成，例如。这实际上取决于你想做什么。

MutationObserver

这是一种做你想做的事情的方法。 MutationObserver并不容易设置。我做了一个小例子：

var target = window.container;

function changeOpacity(target) {
    setTimeout(function(){   
        target.style.opacity = 1;
    }, 100);
}

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
       console.log(mutation);
      if (mutation.type == "childList") {
          for(var i=0; i<mutation.addedNodes.length; i++) {
              changeOpacity(mutation.addedNodes[i]);
          }
      }
  });    
});

// configuration of the observer:
var config = { 
    attributes: true, 
    childList: true, 
    characterData: true
};

// pass in the target node, as well as the observer options
observer.observe(target, config);

setTimeout(function () {
    target.innerHTML = "<div class='elem'>Some text</div>";
}, 2000);

小提琴：http://jsfiddle.net/8zmc8/

Answer 2

添加到Kcent的帖子中，还有一个jQuery插件名为＆＃34; ScrollMagic＆＃34;：

http://janpaepke.github.io/ScrollMagic/

根据页面上的滚动速度/位置激活动画。您可以在这里找到文档：

http://janpaepke.github.io/ScrollMagic/docs/index.html

Answer 3

如果你能够使用jQuery，那么有一个名为waypoints的库来处理这个问题：http://imakewebthings.com/jquery-waypoints/

您正在寻找的核心是：
- 向窗口滚动添加事件监听器
- 监听目标div的offsetTop进入视图
- 然后在所需的offsetTop值

处触发动画

如何在显示DIV元素时启动Javascript函数？

3 个答案:

MutationObserver