javascript - 如何让 css 过渡在滚动到特定 div 之前不开始

Question

当我滚动到其父 div 上时，我在尝试启动 css 转换/序列时遇到了一些问题。我已经使用 javascript 函数完成了此操作，但从未使用 css 转换。

现在我的图像甚至不会显示，更不用说从序列开始了。如果我注释掉 JavaScript，序列就会正常播放。

当我进入父 div section1 时，如何让 css 过渡开始？

我在评论中放了一个jsfiddle，因为这样更容易看到。

/*$("#think").hide();

//init scrolling event heandler
$(document).scroll(function() {

  var docScroll = $(document).scrollTop(),
    boxCntOfset = $("#section1").offset().top - 100;


  //when rich top of boxex than fire
  if (docScroll >= boxCntOfset) {

    $("#think").fadeIn(200)

  } else {
    $("#think").fadeOut(200)

  }
})*/


//Scroll for think images
/*$("#think").hide();
$(function() {
  var oTop = $('##section1').offset().top - window.innerHeight;
  $(window).scroll(function() {

    var pTop = $('body').scrollTop();
    console.log(pTop + ' - ' + oTop);
    if (pTop > oTop) {
      $("#think").fadeIn(200)
    }
  });
});*/

#red {
  width: 100%;
  height: 700px;
  background:red;
}
#section1 {
  width: 100%;
  height: 600px;
  background:blue;
}
#think {
/*opacity: 0;*/
	margin-left: 200px;
	width: auto;
	height: 500px;
	-webkit-animation-name: think;
	        animation-name: think;
	-webkit-animation-duration: 8s;
	        animation-duration: 8s;
    -webkit-animation-direction: normal;
            animation-direction: normal;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
	/*min-height: 500px; min-width: 500px;*/
	background-repeat: no-repeat;
	/*background-size: 100% auto;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="red"></div>
<div class="section" id="section1">
  <div id="section1-right-container">
    <div id="think"></div>
  </div>
</div>

Answer 1

您可以使用jquery.visible插件轻松确定元素是否在视口(viewport)中:http://www.jsdelivr.com/projects/jquery.visible

接下来，您需要确定在窗口滚动函数中是否可见，并添加一个保存动画的 css 类:

$(window).on("scroll", function(){
    // Determine if the element is in the viewport
    if($('.body-main').visible(true)) {
        $('.body-main').addClass("think");
    }
});

JSfiddle 示例:https://jsfiddle.net/Zachary1748/tqh00p9n/