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

    });

代码来自： 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/（向下滚动）

Answer 2

你不能仅仅基于CSS来实现这一点。查看在文档加载（或任何你想要的事件）上通过JQuery添加动画。

例如：

$(document).ready(function() {
  $('.divSelectorGoesHere').animate({
      // Your css "property":"value"
  });
}

到达div（或图像）时启动CSS转换

2 个答案: