关于javascript：到达div（或图像）时启动CSS转换


Start CSS transition when reach the div (or image)

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

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

你只需要添加到这个CSS的转换。但我想让触发器启动动画是当DIV出现在屏幕上时。

我怎样才能做到？

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    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"可见，则此代码将在视图中添加一个类。基于此类，您可以添加CSS转换，例如：

1
2
3
4
5
6
7
8
   .class {
      opacity:0;
      transition:all 0.5s;
   }

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

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

相关讨论

您不能完全基于CSS来实现这一点。通过jquery在文档加载(或任何您想要的事件)时添加动画。

例如：

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