当元素进入视口时应用 CSS 过渡 [关闭]

Posted 2023-03-06

【中文标题】当元素进入视口时应用 CSS 过渡 [关闭]

【英文标题】：Apply CSS transition when element comes into viewport [closed]

【发布时间】：2014-02-12 17:41:29

【问题描述】：

我正在尝试在元素进入视口时应用 CSS 过渡效果（即当用户滚动到它时），但不是在此之前。

我已经知道如何使用 CSS 过渡，但是如何仅在元素进入视口时应用它们？

最好的方法是什么？如果有一些图书馆可以简化任务，我很高兴知道。

【问题讨论】：

发布和您编写的代码示例

给你 - ***.com/a/26466655/104380

【参考方案1】：

试试 CSS3 Animate It，让整个过程像添加几个类一样简单。

http://jackonthe.net/css3animateit/

然后你可以像这样添加类来开始。

<div class='animatedParent'>
<h2 class='animated bounceInDown'>It Works!</h2>
</div>  

【讨论】：

死链接，很遗憾。

【参考方案2】：

这是一个很棒的演示：

滑入（向下滚动时） CSS 技巧http://bit.ly/19NN2NJ 从底部框滑入 - CodePen http://bit.ly/1dvNF9U

也许它可以帮助您看到重点。正如您在演示中看到的那样，Point 是检测视口并仅在 onScroll 上应用效果。如果您需要有关错误或特定问题的帮助，只需发送来源 :-) 我会解决。

【讨论】：

这是另一个 - codepen.io/vsync/pen/rwygwq