草庐IT

滚动驱动动画

全部标签

javascript - 在 React Native 中动态添加组件时如何启用流畅的动画?

在我的ReactNative应用程序中,我有一张带有条件的卡片按下按钮时呈现并在触发相同按钮时删除的组件。这是我的代码的样子:this.setState({triggered:!this.state.triggered})}title="ClicktoExpand"/>Loremipsumdolorsitamet,consecteturadipiscingelit,seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.Utenimadminimveniam,quisnostrudexercitationullamcolabori

javascript - 如何检查滚动条是否可见?

我想在我的网站上显示一个“转到顶部”链接。只有在垂直滚动条可见时,该链接才应该可见。我如何使用JavaScript执行此操作?谢谢 最佳答案 你可以查看elem.clientHeight值,但它也取决于css属性 关于javascript-如何检查滚动条是否可见?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/2927963/

javascript - 动画图像在长时间的 Javascript 方法调用期间不动

在运行10秒向html添加一些元素的方法中,动画gif根本没有移动,给人一种网页卡住的感觉。任何解决办法。示例代码:$('#button).click(function(){showAnimatedGif();longRunningMethod();hideAnimatedGif();});解决此问题的一种方法是将长时间运行的方法分解为多个步骤并以这种方式设置动画,但是您必须以这种方式为每个长时间运行的方法编写代码。想知道是否还有其他方法可以做到这一点? 最佳答案 确保动画实际发生的唯一方法是让longRunningMethod定期

javascript - 谷歌地图 API;抑制 map 平移以启用页面滚动

我有一个移动网页,客户可以在其中通过表单提交或当前位置弹出窗口输入他们的邮政编码,然后找到附近的中心。响应包括这些中心的列表以及显示其位置的googlemap插入和指示列表中指示的中心的图钉。问题是map占用了页面上的大量空间。很难向下滚动到map下方的列表。我想禁用Googlemap上的平移功能,以便人们可以触摸map并上下滚动页面。但是,我不想完全抑制map上的所有触摸事件,因为我仍然希望人们能够单击图钉并查看与这些标记一起出现的弹出信息框。这就是为什么我认为静态图像实现可能不是可行的方法。这是页面的链接:http://cs.sandbox.millennialmedia.com/

javascript - 如何通过 javascript 添加动画 svg?

如果我在纯html/svg文件中编写svg,它工作正常,圆圈动画正确。但是如果我通过javascript动态添加circle元素,则添加了circle,但它没有动画。怎么了?js代码:varsvg=$("svg");//usejqueryvarcircle=document.createElementNS("http://www.w3.org/2000/svg","circle");circle.setAttribute("r","5");circle.setAttribute("fill","red");varani=document.createElementNS("http://

javascript - 在维基百科上调整动画大小

如果你去Wikipediapage在Chrome和ctrl+scrollup或ctrl+scrolldown中,调整大小是在动画中完成的。这是如何实现的?(在FF中只有ReadViewsourceViewhistory右上角的链接动画) 最佳答案 如果您使用Chrome的检查器检查CSS,您会发现这条规则:body.vector-animateLayoutdiv#content,body.vector-animateLayoutdiv#footer{transition:margin-left250ms,padding250ms;-

javascript - Google Maps API v3 标记掉落和反弹动画

我从谷歌得到了这个修改过的示例代码varstockholm=newgoogle.maps.LatLng(59.32522,18.07002);varparliament=newgoogle.maps.LatLng(59.327383,18.06747);varmarker;varmap;functioninitialize(){varmapOptions={zoom:15,mapTypeId:google.maps.MapTypeId.ROADMAP,center:stockholm};map=newgoogle.maps.Map(document.getElementById("ma

javascript - jQuery - 每 x 秒向下滚动一次,然后滚动到顶部

我有一个可滚动的div,我想每X秒向下滚动50像素。这很好并且有效。我还有一个单独的函数,当它到达底部时将div滚动回顶部。还可以;工作。现在,我需要将两者结合起来,以便在我们再次滚动到顶部之前忽略向下滚动。我这里有一个“有效”的例子,你会看到它有一些非常疯狂的行为:http://jsfiddle.net/JVftf/window.setInterval(scrollit,3000);functionscrollit(){$('#scroller').delay(2000).animate({scrollTop:$("#scroller").scrollTop()+50},'slow'

javascript - 使用javascript设置CSS动画延迟

我的css文件中有一些关键帧动画。已经指定了一个动画延迟。包装器div具有属性数据延迟。我想获取css文件中的animation-delay,并为其添加data-delay的值。然后我希望动画以新的延迟开始。我尝试了ele[i].style.animationDelay。但似乎这会返回null,直到我为其设置一个值。如果我设置ele[i].style.animationDelay='5s'动画仍然会随着css文件的延迟运行。HTMLHitest!CSSbody{font-size:300%;}#wrapperh1{position:absolute;}#hi{transform:tra

javascript - 检测溢出 :hidden page? 中的滚动尝试

我想检测用户何时试图在我的页面上向上或向下滚动,但由于我不想允许实际滚动,所以我设置了一个overflow:hiddenbody。代码是这样的:$('html,body').css('overflow','hidden');$(window).scroll(function(event){console.log("scroll");});问题是因为没有实际的滚动我无法触发事件,我考虑过删除溢出样式并以某种方式防止滚动但我不知道该怎么做。无论如何,有没有办法在检测滚动尝试时修复滚动?谢谢 最佳答案 尝试使用jQuery鼠标滚轮http