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

Question

我想以特定transitionY值触发函数。

我找到了这个：

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

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

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

但这只是过渡结束后的触发器。当我在我的页面上向下滚动时，一个 div 框将样式值更改为 (transform: translateY(-100%))。

我试过了：

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

但它不起作用。

标签： javascriptjqueryhtmlcss

Answer 1

您可以使用jQuery 的 $.animate 函数。使用进度属性，您将获得动画的当前状态。例如

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>

希望能帮助到你。