javascript - 在特定的转换值触发函数

Question

我想在特定的 transitionY 值触发一个函数。

我发现了这个:

document.getElementById("main").addEventListener("webkitTransitionEnd", myFunction);

document.getElementById("main").addEventListener("transitionend", myFunction);

function myFunction() {
    alert('huuh');
}

但它只是一个transition End后的trigger。当我在我的页面上向下滚动时，一个 div 框将样式值更改为 (transform: translateY(-100%))。

我试过:

if (document.getElementsByClassName('scroll-container').style.transform == "translateY(-100%)")
.......

但它不起作用。

Answer 1

您可以使用 jQuery's $.animate function .使用 progress 属性，您将获得动画的当前状态。例如

setTimeout(function() {
  var transitionPointReached = false;
  $('#some-id').animate({
    opacity: 0.1
  }, {
    duration: 1000,
    progress: function(animation, progress, remaining){
      console.log('progress called', progress, remaining);
      if(!transitionPointReached && progress >= 0.7) {
        transitionPointReached = true;
        // call the required callback once.
      }
    }
  });
}, 1000);

#some-id {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="some-id"></div>

希望对您有所帮助。