jjzjj

animation

全部标签

javascript - Angular2 - 让动画不适用

我有一个Angular2应用程序,我正在尝试将动画添加到我的路由中,以便它在我更改页面时滑动。进入动画效果很好,但是离开动画没有激活,加载新页面后上一页就消失了。有谁知道这个问题的原因?plunker根据anuglar2docs,我认为我的过渡是正确的。//transition(':enter',[...]);//void=>*//transition(':leave',[...]);//*=>void动画文件exportfunctionrouterTransition(){returntrigger('routerTransition',[transition('void=>*',[

javascript - 滚动动画

我需要执行带有动画的javascript方法scrollTo(x,y)。我不能'使用jQuery来做到这一点。 最佳答案 [Workingdemo]functioninterpolate(source,target,pos){return(source+(target-source)*pos);}functioneasing(pos){return(-Math.cos(pos*Math.PI)/2)+0.5;}functionscrollTop(duration){duration=duration||1000;varstartY=

单击时停止的 Javascript 发光/脉动效果

我有以下Javascript可以使文本链接持续发光/脉动。此链接显示同一页面的另一部分,因此我希望它在用户单击后停止。$(document).ready(function(){functionpulsate(){$(".pulsate").animate({opacity:0.2},1200,'linear').animate({opacity:1},1200,'linear',pulsate);}pulsate();});所以基本上,我只需要知道我需要在此处添加什么,以便在单击后效果停止。如果再次点击相同的链接,页面显示的部分将隐藏-第二次点击后再次启动效果是否太麻烦?期待各位好心人

javascript - 只执行一次jquery animate

我有以下功能:$('.link1').click(function(){$("#div2").slideUp(function(){$("#div1").slideToggle();});$('html,body').animate({scrollTop:'600px'},800);});它切换一个div并向下滚动页面。问题是每次用户切换页面时再次向下滚动......我怎么能只在第一次点击时运行这个动画功能? 最佳答案 使用标志或设置数据属性来确保滚动动画只在第一次点击时出现。varflag=true;$('.link1').cli

javascript - 使用 css3 和 jquery 分别动画缩放和旋转

更新和澄清我需要执行一些在图标上立即旋转(使用css3transform)的jquery。然后一旦图标旋转,我想设置动画并缩放到200%的大小。但是,由于缩放和旋转都是一个CSS3属性(转换),我看到这两个转换都作为0.5秒的动画发生。(在JQUERY代码中,我还更新了位置(顶部、左侧),但由于它不在transition:标记中,因此它会根据需要立即发生。我想要的是立即发生旋转,并在2秒内发生缩放。有什么想法吗?CSS:transition:transform0.5s;-webkit-transition:-webkit-transform0.5s;JQUERY:self.pick=f

javascript - 如何检测 Tween.js 动画完成?

我正在使用此代码使用tween.js为场景中的相机设置动画是否存在任何已完成或已完成的事件?tween:function(target){varposition=camera.position;vartween=newTWEEN.Tween(position).to(target,1800);tween.onUpdate(function(){camera.position.x=position.x;camera.position.y=position.y;camera.position.z=position.z;if(android){camera.lookAt(android.po

javascript - 新呈现元素的动画,但不在页面加载时

我订阅了一个Firebase实时数据库,这样当我向它提交内容时,它会立即呈现在View中,而不需要任何jQuery或ajax。我想为这些元素的渲染设置动画,这样当一个新元素被添加到DOM时,它的div的background-color是绿色的,慢慢消失。我不希望此类的所有div在加载时执行此动画。我知道怎么做前者:@keyframesgreen-fade{0%{background:rgb(173,235,173);}100%{background:none;}}.post-div{animation:green-fade5sease-in1;}但是这个动画当然会在这个类的任何时候呈现

javascript - 检测属性是否可以通过 CSS3 转换设置动画?

可以使用CSS3转换动画的属性列表在浏览器之间并不一致,并且可能会随着新浏览器版本的变化而变化。例如,-moz-transform在FF3.6中不能与-moz-transition一起设置动画,但在FF4中可以。那么,有没有一种方法可以在JavaScript中检测特定属性是否可以设置动画?我不想使用用户代理嗅探,因为它不可靠。提前致谢! 最佳答案 是的,有办法。下面是演示,下面是解释。其中涉及一些非常重要的注意事项,因此请务必继续阅读。以下代码将测试浏览器是否可以在两个值之间设置动画。代码jsFiddledemo./*@paramp

JavaScript 音频频谱分析器

是否有等效于ActionScript的channel.leftPeak或channel.rightPeak的JavaScript。这用于声音编程,例如VU表。我正在尝试构建一个声音应用程序,但我避免使用Flash和ActionScript,因为它是用于网站的。我想知道是否可以用JavaScript来完成。基本概念是播放一首歌曲并能够通过频谱分析仪或VU表看到它的可视化。 最佳答案 根据您的问题,您需要的是JavaScriptSoundManager2插件。SpectrumAnalyzer/VUMeter视觉效果的演示页面是HERE截

javascript - 为什么我的javascript代码不能继承Animal类的原型(prototype)?

我正在尝试创建一个新类Dog通过原型(prototype)继承从Animal继承类:functionAnimal(){this.name="animal";this.writeName=function(){document.write(this.name);}}functionDog(){this.name="dog";this.prototype=newAnimal();}newDog().writeName()JSFiddle但是,我收到一个Javascript错误:UncaughtTypeError:Object#hasnomethod'say'.为什么?不应该Dog对象保留A