Question

我想以特定的call may violate context's modifies clause A precondition for this call might not hold.值触发函数。

我发现了：

transitionY

但这只是过渡结束后的触发器。当我向下滚动页面时，一个div框将样式值更改为（transform：translateY（-100％））。

我尝试过：

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

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

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

但它不起作用。

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>

希望有帮助。

Answer 2

或者如果页面到达新部分，是否可以触发功能？像＃0（<a id="button" href="#0"></a>）一样转到＃1吗？

问候

在这里您可以明白我的意思： http://salon-lifestyle.de.w0192ceb.kasserver.com/#0

Answer 3

或者如果页面到达新页面，是否可以触发功能部分？像＃0（）一样转到＃1吗？

Intersection Observer API是针对此类用例设计的，它允许在视口到达/穿过/已经到达一组子代时触发回调。

关于您的过渡问题，您可以执行以下操作，但我不建议您使用它。您可以使用element.cssText

获取transition属性的确切值

const dummyDiv = document.getElementById('dummy')

// Assuming the transition is linear and lasts 2secs, 
// mid-transiton happens after 1000ms
dummyDiv.addEventListener('transitionstart', () => {
  window.setTimeout(() => {
    dummyDiv.innerHTML = 'mid transition'
  }, 1000)
})
dummyDiv.addEventListener('transitionend', () => {
  dummyDiv.innerHTML = 'end transition'
})

#dummy{
padding: 50px 100px;
font-size: 35px;
background: #000;
color: #FFF;
transition: 2s linear;
}

#dummy:hover{
background:red
}

<div id="dummy">Hover me</div>

在特定的过渡值处触发功能

3 个答案: