js：

Question

我正在尝试为该框设置动画。一旦滚动到达元素，它必须从左到右！我面临的问题是，当我到达元素时，动画已经完成，我无法在滚动动画上实现。

这是我的HTML

<script>
    $(window).scroll(function() {
        $('#box').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow + 2000;) {
                $(this).addClass("slideDown");
            }
        });
    });
</script>



</head>

<body>
    <div id="box" class="slideDown"></div>


</body>

css代码

html{
  height: 1800px;
}

#box{
  height: 250px;
  width: 250px;
  background: red;
margin: auto;
margin-top: 800px;
visibility: visible ; 

}

.slideDown{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;  

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;  

  display: block;          
}

@keyframes slideDown {
  0% {
    margin-left: -20%;
  }
  25%{
    margin-left: 20%;

  }
  75%{
    margin-left: 30%;
  }     
  100% {
    margin-left: 40%;
  }   
}

@-webkit-keyframes slideDown {
  0% {
    margin-left: -20%;
  }
  25%{
    margin-left: 20%;

  }
  75%{
    margin-left: 30%;
  }     
  100% {
    margin-left: 40%;
  }   
}

Answer 1

这是一种方法：

fiddle

我所做的是使用css过渡在元素的2个所需状态之间进行动画处理.1状态被粘到右边，另一个被粘到左边..

js：

var imagePos;
var bottomOfWindow;

$(window).scroll(function() {
    bottomOfWindow = $(window).scrollTop()+$(window).height();
        $('#box').each(function(){
            imagePos = $(this).offset().top;
            if (imagePos <= bottomOfWindow-200) {
                $(this).addClass("slideDown");
            }
            else $(this).removeClass("slideDown");
        });
    });

说明：

bottomOfWindow正在计算窗口的底部..每当#box元素进入视图加上200px偏移时，转换就会发生。

如果您有任何疑问，请告诉我..祝您好运

滚动动画。动画在我到达元素之前完成了吗？

1 个答案:

js：