Question

第一次转换立即运行，第二次转换完美。我一直试图在转换持续时间的同时运行它。一些帮助将受到高度赞赏。谢谢:)）

<script type="text/javascript">
    function Scroll(){
        var top = document.getElementById('header');
        var ypos = window.pageYOffset;
        document.getElementById('color-change-on-scroll').innerHTML=ypos;
        if(ypos > 2350) {
            var elem = document.getElementById('homer_pic');
            elem.style.transition="top 1.0s linear 0s"; // runs instantly
            elem.style.top="0px";
            elem.style.transition="opacity 1.0s linear 0s"; // runs perfect
            elem.style.opacity=1;
            document.getElementById('color-change-on-scroll').innerHTML=ypos+" yposhigher then 2350";
        }
    }
    window.addEventListener("scroll",Scroll);
</script>

#homer_pic{
    position: relative;
    float: left;
    height: auto;
    width: 33.333333%;
    background-color:  #f2f2f2;
    text-align: center;
    padding-top: 120px; 
    padding-bottom: 150px;
    opacity: 0;
    top:100px;
}

Answer 1

每个元素只能有一个CSS过渡属性。

elem.style.transition="top 1.0s linear 0s"; // runs instantly
elem.style.top="0px";
elem.style.transition="opacity 1.0s linear 0s"; // runs perfect
elem.style.opacity=1;

第二个转换定义会覆盖第一个转换定义。这就是为什么立即运行的原因。要在同一元素上转换多个属性，您必须这样做：

elem.style.transition = "top 1.0s linear 0s, opacity 1.0s linear 0s";
elem.style.top = "0px";
elem.style.opacity = 1;

＆＃13;

function Scroll() {
  var top = document.getElementById('header');
  var ypos = window.pageYOffset;
  document.getElementById('color-change-on-scroll').innerHTML = ypos;
  if (ypos > 50) {
    var elem = document.getElementById('homer_pic');
    elem.style.transition = "top 1.0s linear 0s, opacity 1.0s linear 0s";
    elem.style.top = "0px";
    elem.style.opacity = 1;
    document.getElementById('color-change-on-scroll').innerHTML = ypos + " yposhigher then 50";
  } else {}
}
window.addEventListener("scroll", Scroll);

＆＃13;

body {
  height: 400px;
}

#homer_pic {
  position: relative;
  float: left;
  height: auto;
  width: 33.333333%;
  background-color: black;
  text-align: center;
  padding-top: 120px;
  padding-bottom: 150px;
  opacity: 0.5;
  top: 100px;
}

＆＃13;

<div id="homer_pic">
  Pic
</div>
<div style="position: fixed" id="color-change-on-scroll">
  0
</div>

＆＃13;

即使给出了转换持续时间，也会立即运行多个转换

1 个答案: