当前位置: 首页 > 面试题库 >

CSS3-Animate元素(如果在视口中可见)(页面滚动)

宦翔飞
2023-03-14
问题内容

我在html页面上的各个div元素中添加了CSS动画。但是所有动画同时播放,并且我无法在页面底部看到动画。如何在向下滚动页面时播放它们?


问题答案:

你需要使用 JSjQuery的 ,以 触发 您的 CSS3 过渡/动画
一旦元素是视**。

jsFiddle演示- 使用inViewport插件

侦听loadresize以及scroll获取事件( 如果元素进入视口) 。 您可以使用我构建的 一个小型jQuery插件

假设您有动画的盒子,例如:

<div class="box rotate"></div>
<div class="box scale"></div>
<div class="box translate"></div>

比您的CSS中的:

.box{
    width:300px;
    height:300px;
    margin:500px 50px;
    background:red;
    transition: 1.5s; /* THE DURATION */
}

.rotate.triggeredCSS3    {transform : rotate(360deg); }
.scale.triggeredCSS3     {transform : scale(1.6); }
.translate.triggeredCSS3 {transform : translate3d(400px,0,0); }

其中.triggeredCSS3将由插件动态分配:

$(".box").inViewport(function(px){
    if(px) $(this).addClass("triggeredCSS3") ;
});


 类似资料:
  • 问题内容: 检查div类“ media”是否在浏览器的可视视口内的函数,而不管窗口的滚动位置如何。 试图通过此功能使用此插件,但我不知道如何使它工作。 问题答案: 好吧,您如何尝试使其工作?根据该插件的文档,返回一个布尔值,指示该元素是否可见。因此,您可以像这样使用它:

  • 如果指定的元素在可视窗口中可见,则返回 true ,否则返回 false 。 使用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 值来确定给定元素是否在可视窗口中可见。 省略第二个参数来判断元素是否完全可见,或者指定 true 来判断它是否部分可见。 const elementIsVisibleInViewport = (

  • 问题内容: 有没有一种有效的方法来判断DOM元素(在HTML文档中)当前是否可见(显示在 视口中 )? (问题是针对Firefox的。) 问题答案: 更新: 时间在前进,我们的浏览器也在前进。 不再推荐 使用 此技术, 如果不需要支持7之前的Internet Explorer版本,则应使用Dan的解决方案。 原始解决方案(现已过时): 这将检查该元素在当前视口中是否完全可见: 您可以简单地对其进行

  • 我试图使用给定的url登录沙箱贝宝应用程序,但它抛出元素不可见异常错误时,试图找到电子邮件id和密码字段在页面使用下面的代码。

  • 我使用JQuery在向下滚动时隐藏一个元素,并在向上滚动到屏幕顶部时显示它。我遇到的问题是,每当我滚动到窗口顶部时,显示的元素会立即再次隐藏。 我记录了滚动位置,当它滚动到顶部时,它看起来肯定保持在0,所以不太清楚为什么会发生这种情况。我甚至尝试使用大于0的数字,例如10,但同样的情况仍然发生。任何帮助都将不胜感激。 编辑:我根据要求添加了一些简单的html标记,其设置与我的实际代码几乎相同;

  • 问题内容: 好吧,我有些困惑。 我试图考虑来自jQuery背景的角度方式。 问题:如果窗口不滚动,我只想隐藏一个固定的元素。如果有人向下滚动页面,我想隐藏该元素。 我尝试创建一个自定义指令,但由于滚动事件未触发,因此无法使其正常工作。我在想一个像下面这样的简单控制器,但是它甚至没有运行。 控制器: 视图 实时预览 http://www.thewinetradition.com.au/new/#/p