javascript - 到达 div(或图像)时开始 CSS 转换

Question

我已经搜索过了，但没有找到太多相关信息。可以使用 :hover 效果创建和 CSS 过渡，例如:

div { 颜色:红色；}
div:hover {color: blue;}

您只需将过渡添加到此 CSS。但我希望启动动画的触发器是当 DIV 出现在屏幕上时。

我怎样才能做到这一点？

Answer 1

执行此操作的一种方法是使用一个函数来检查当您滚动页面时所讨论的元素是否在 View 中。

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(window).scroll(function(){

        if (isScrolledIntoView('.class') === true) {
            $('.class').addClass('in-view')
        }

    });

代码来自: Check if element is visible after scrolling

如果“.class”在向下滚动后可见，此代码将添加一个类“in-view”。基于此类，您可以添加 css 转换，例如:

   .class {
      opacity:0;
      transition:all 0.5s;
   }

    .class.in-view {
       opacity:1;
    }

示例:http://jsfiddle.net/z3xTU/ (向下滚动)