jjzjj

Animation

全部标签

javascript - Angular 动画 : Animate Parent and Child Elements

我用Angular动画创建了一个元素(div.parent),效果很好。当我向它添加一个子元素并尝试同时为该子元素设置动画时,其中一个动画并没有结束运行(它只是捕捉到新状态)。堆栈Blitz:https://stackblitz.com/edit/angular-2tbwu8标记:动画:trigger('theParentAnimation',[state('down',style({transform:'translateY(100%)translateZ(0)',})),transition('**',[group([query(':self',[animate('0.9scubi

javascript - 如何强制 jQuery 动画同时运行?

我有一个到处都是动画(JQueryAnimation)的网页。典型的动画序列可能包含三个或四个同时独立设置动画的对象。我面临的问题是动画的排队是不可预测的。一些动画同时运行,而另一些则不同。我正在做类似的事情setTimeout(function(){//animations},delay);在许多地方只是为了尝试对动画进行分组。即使使用它,代码块中的一些动画也不会同时运行。有没有办法强制动画同时运行?有没有办法用动画填充队列然后同时执行这些动画?是否有任何全面的文档说明这件事实际上是如何工作的?编辑:Samplecode警告:代码困惑问题是查看代码,您如何知道哪些动画将同时运行?

JavaScript动画库...推荐

按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我对人们对轻量级独立JavaScript动画库的“真实世界”使用意见/建议很感兴趣。因此,不需要像jQuery、dojo等“全功能”JavaScript库......注意事项:-请不要使用面向HTML5canvas的库(例如processing.js)。-Css3支持是一项奖励,但不是必需的。-效率越高越好!-如果你喜欢,请告诉我和其他人你为什么推荐你推

javascript - leaflet.js : Fire event when setView() has finished the animation. 这怎么可能?

我目前正在使用leaflet.js,我现在正在网上搜索很多,以找出:如果有一个事件,可以在异步函数setView()的动画结束后触发。这是我尝试过的:map.setView([lat,lon],12,{pan:{animate:true,duration:0.5},zoom:{animate:true},animate:true}.on('ready',function(e){console.log("animationfinished!");});setView-command完美运行,但是本地图动画准备就绪时应该触发的函数不起作用。有没有人有解决办法?

javascript - 你如何使用 jQuery 加速动画中间动画?

假设你有一个像这样的特定时间运行的动画:$('span').animate({opacity:1},10000);动画很长,因此用户尝试再次单击按钮。动画已经播放了一定的时间,每次可能都不一样。在第二次点击时是否可以更新动画过程,在用户点击时保持对象的不透明度,只是改变完成所需的时间?基本上我想在动画中途更新动画过程。 最佳答案 您可以使用animate的step选项来跟踪动画的进度。然后根据这些信息,您可以计算动画中剩余的时间。然后停止当前动画并开始一个持续时间减半的新动画。http://jsfiddle.net/MdD45/编辑

javascript - 使用 css 和 javascript 将 div 翻转 180 度

我想使用触发css动画的javascript函数将div翻转180度。我的div有以下声明:.start-photo-thumb{position:relative;float:left;background:#444444;height:192px;width:192px;margin-right:10px;margin-bottom:10px;perspective:1000px;animation:rotating0.6slinearinfinite;animation-play-state:paused;}@keyframesrotating{from{transform:ro

javascript - 使用 window.scrollBy 平滑滚动

我正在尝试使用setInterval()和window.scrollBy()平滑地滚动页面我会使用jQuery的animate函数,但动画需要连续且无限循环(页面内容将是无限的)。这个想法相当简单:varx=1;vary=1;setInterval(function(){window.scrollBy(0,x);},y);如何在不使动画显得跳动的情况下提高滚动速度?我遇到了两个问题:setInterval()不能采用小于1的Y值(或者可能接近30,具体取决于浏览器限制)增加X的值会导致动画跳动(由于像素被完全跳过)这里有一个fiddle可以用来做实验:http://jsfiddle.n

javascript - 连续运行 jQuery 动画

我有一组淡出动画,之后我想运行一组animation调用。如何确保一个接一个运行?如果我这样做:$(div1).fadeOut(600);$(div2).fadeOut(600);$(div3).fadeOut(600);$(div4).animation({opacity:1},600);$(div5).animation({opacity:1},600);$(div6).animation({opacity:1},600);动画并行运行。上面的代码只是问题的简化/抽象。我无法将所有调用组合到一个函数中,在现实生活中元素的数量是可变的,每个元素都由它自己的类管理。

javascript - 如何解决在 JavaScript 中使用视差效果滚动时元素闪烁?

我正在尝试使用JavaScript重新创建具有视差效果的网站。这意味着我有两层或更多层,它们在滚动时以不同的速度移动。在我的例子中,我只移动一层,另一层保持静止:第1层=网站文本;第2层=元素背景;为此,我使用简单的源代码(使用jQuery1.6.4):vardocwindow=$(window);functionnewpos(pos,adjust,ratio){return((pos-adjust)*ratio)+"px";}functionmove(){varpos=docwindow.scrollTop();element.css({'top':newpos(pos,0,0.5)

javascript - 谷歌 API : gauge animation

我试图让googlegaugepointer移动,但它没有移动,我已经设置了动画配置,因为它应该在varoptions中设置,例如duration:1000和easing:'inAndOut',我是n00binGoogleAPI所以为了我的无知尝试。谁能帮帮我。这是tutoriallink我正在使用它。代码正在工作,但部分工作,仪表指针应该缓慢移动到它的最大值,但是,在我的情况下它不会工作。这是代码。google.load('visualization','1',{packages:['gauge']});google.setOnLoadCallback(drawChart);func