到达div(或图像)时启动CSS转换

Question

我已经搜索过了,但没有找到关于它的更多信息.可以使用:悬停效果创建和转换CSS,例如:

div { color: red;} div:hover {color: blue;}

而你只需要添加到这个CSS的过渡.但是我希望启动动画的触发器是DIV出现在屏幕上的时候.

我怎样才能做到这一点？

Answer 1

一种方法是使用函数在滚动页面时检查相关元素是否在视图中.

    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')
        }

    });

代码来自: 滚动后检查元素是否可见

如果向下滚动后".class"可见,此代码将添加"in-view"类.基于此类,您可以添加css过渡,例如:

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

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

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