到达 div（或图像）时启动 CSS 过渡答案

【问题标题】：Start CSS transition when reach the div (or image)到达 div（或图像）时启动 CSS 过渡
【发布时间】：2013-12-09 12:35:31
【问题描述】：

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

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

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

我怎样才能做到这一点？

【问题讨论】：

见这里：stackoverflow.com/questions/8774089/…

标签： javascript jquery html css

【解决方案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/（向下滚动）

【讨论】：

这正是我想要的，谢谢！我会检查它是否能在我需要的地方工作。
我自己试过了，没有按预期工作。看看：jsfiddle.net/eudennis/s8qjX顺便说一句，是否可以将 addClass 更改为 toggleClass 以在不可见时删除该类？
@euDennis 嘿伙计，我很乐意提供帮助，但首先要修复代码中的错误并包含 jquery。
我添加了 jquery 但忘记更新了。你的意思是什么错误？
我忘了回答，但经过几次尝试后它起作用了；）

【解决方案2】：

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

例如：

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

【讨论】：