jjzjj

animation

全部标签

javascript - 当我的动画完成时,transitionend 事件不会触发

我正在尝试使用jQuery在css动画完成时触发一个事件并且它基本上可以正常工作,但由于某种原因,直到我将鼠标移开时才会调用transitionend事件有问题的对象。方法如下:functionreplaceWithSearch(){varsearchWrapper=constructSearchBox("");$(this).addClass("animatedfadeOut");//cssanimation$(this).on('webkitTransitionEndotransitionendoTransitionEndmsTransitionEndtransitionend',

javascript - jQuery 动画延迟

如何使用jQuery延迟动画?我需要获取一个navigation展开宽度,然后展开高度,然后reversed做反向动画。代码:$(function(){$("#navli").not("#logo,#navliulli").hover(function(){$(this).animate({width:"200px"},{queue:false,duration:1000});},function(){$(this).animate({width:"30px"},{queue:false,duration:1000});});$("#navli.parent").hover(funct

javascript - 为每个列表项添加带有延迟的 CSS 动画

这个问题在这里已经有了答案:Howtomakeeachtagappearslowlyoneaftertheother(1个回答)关闭7年前。我正在尝试编写一些jquery,它将遍历指定的无序列表/dom元素并为每个列表项/子项分配一个CSS(动画)类。我还想在.addClass之间设置一个可调整的延迟时间。我尝试过的一切都惨遭失败。例如:Item1Item2Item3Item4变成:Item1(50msdelay)Item2(50msdelay)Item3(50msdelay)Item4(50msdelay)有什么想法吗?

javascript - React Pose + React Router 键无法识别?

所以我有一个小型React应用程序。尝试使用ReactPose来制作页面转换动画。我遵循了与oneoftheofficialdemoswithreact-router-dom类似的结构,如果我正在看这个权利,它应该可以工作。但是,我收到一条错误消息:Error:HEY,LISTEN!EverychildofTransitionmustbegivenauniquekey....并直接指向下面的代码。是否有某种方法可以在这里创建key?每个页面中是否有可能导致此处出现问题的元素?轨迹仅直接指向这部分代码(特别是PoseGroup),所以我不确定我在这里遗漏了什么。constRouteCon

javascript - 在 jQuery 中进行宽度转换

我有一张图片,当它悬停在上面时,我希望使用jQuery增加它的宽度。我知道该怎么做,但现在我想让这个效果更慢,可能500毫秒长,而不是即时的。我知道这应该很简单,我只是不知道语法。如何实现?这是我当前的脚本:$("#example").width("250");编辑:我遇到了另一个问题。我创建了两个脚本,一个用于放大图像,一个用于缩小图像。但是,脚本似乎有很多错误和不流畅,并且在大小之间来回无故切换。我正在使用onmouseover和onmouseout调整它的大小。//Bigger$("#example").animate({width:250},200);//Smaller$("#

Javascript 彩色动画

我想在原始javascript中从一种颜色动画(过渡)到另一种颜色。我不想使用任何框架(jquery、mootools)或css3。普通的原始javascript。我真的很难做到这一点,有人可以帮我吗?:) 最佳答案 也许是这样的:lerp=function(a,b,u){return(1-u)*a+u*b;};fade=function(element,property,start,end,duration){varinterval=10;varsteps=duration/interval;varstep_u=1.0/steps

javascript - 使用 Javascript 的动画图像

有没有一种方法可以使用基于某些png或jpg的javascript创建类似gif的图像?只是一个简单的代码,可以将一张图片换成另一张图片,创建动画效果,就像gif一样。我的想法是用于生成横幅,所以我上传图片(完成),我需要这个动画的代码。 最佳答案 去年愚人节,Stackoverflow将这种技术用于其独Angular兽动画。我保留了动画onmywebsite.动画代码是我自己的——我没有看stackoverflow是怎么做的。概念是创建一个Sprite,然后在一个时间间隔上改变背景位置。constframeHeight=102;c

javascript - 编写 jQuery rolodex 样式的时钟翻转动画?

我正在努力根据那些带有翻转数字的旧时钟制作一个简单的动画。我在下面添加了一张从PremiumPixels上找到的免费赠品PSD复制的图片:我遇到的最大问题是使用jQuery在HTML/CSS/JavaScript中构建“翻转”动画。我找到的唯一教程是fromthisnettuts+article实际上使用图像。它将时钟的上半部分和下半部分分成两个不同的图像集,并为经过的每一秒替换它们......这种方法在网站中是不现实的,因为它没有为读者提供实际的上下文。我更愿意将数字硬编码到HTML中并仅通过jQuery执行翻转动画-最好没有图像,除了背景自动收报机框。或者换句话说,数字被编码成HT

javascript - Angular 1.2.5 嵌套动画

使用ng-view,我想要一个简单的fadeIn/fadeOut用于页面转换。但是,在不同的“View”中,我有子元素,我想在父元素上发生fadeIn/fadeOut的同时设置动画。问题是,如果父级正在设置动画,则Angular取消任何嵌套动画。为什么是这样?还有其他方法可以实现我想要的吗? 最佳答案 您应该能够使用$animate服务而不是ngAnimate。如果你这样做,你可以用一个promise链接动画。https://docs.angularjs.org/api/ngAnimate/service/$动画

javascript - 是否有可靠的方法来检测给定元素及其子元素的所有动画何时完成?

当声明CSS动画时,元素将触发animationStart和animationStartEnd事件。有没有办法在以下情况下触发javascript函数:所有动画都完成了,包括child动画。没有声明动画,也不需要等待。这是我目前的做法:http://codepen.io/miguel-perez/pen/CDcAGvar/***Firesacustomeventwhenallanimationsarecomplete*@param{object}$element-jQueryobjectthatshouldtriggerevent**/triggerAllAnimationEndEve