草庐IT

animation

全部标签

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 - 错误 : Zeptojs Animate Is Not A Function

zeptojs文档here当我使用$().animate函数时抛出如下错误:TypeError:$(...).animate不是函数而我使用的版本是页面提供的。 最佳答案 $(...).animate在zeptofx模块中。它不再在zepto的基本主要发行版中!http://zeptojs.com/#modules 关于javascript-错误:ZeptojsAnimateIsNotAFunction,我们在StackOverflow上找到一个类似的问题:

javascript - 如何在运动路径上有效地反转 SVG (SMIL) 动画?

我正在尝试确定如何有效地反转此SVG动画(使用SMIL),它使用animateMotion和path上的d属性元素。我需要动画围绕形状逆时针运行。当前动画可以查here相关代码如下。document.getElementById("svgobject").pauseAnimations();STARTSTOP我明白我可以手动反转SVG路径数据命令,包括moveto(M,m)、lineto(L,l)、curveto(C,c)等。考虑到我需要反转的路径坐标数量(除了这个动画中的那些),我正在尝试确定是否有更有效的方法来执行此操作。 最佳答案

javascript - Chrome 开发者工具中是否有 "pause animation"功能的键盘快捷键? (F12)

Chrome的开发者工具中有一个很棒的功能,允许您暂停动画并控制它们的速度,但问题是它们是鼠标控制的按钮。有时我需要暂停动画而不实际移动鼠标光标来检查悬停激事件画中的某些内容,所以我不能真正使用暂停按钮。该动画暂停按钮是否有键盘快捷键,这样无论我在做什么,我都不需要将光标移开? 最佳答案 如前所述,没有用于暂停动画的键盘快捷键,但我发现了下一个最好的方法:当光标位于带有悬停激事件画的元素。这不会停止已经运行的动画,但会阻止在检查时进一步触发鼠标激活的动画,这可能足以检查一个元素。 关于j

javascript - 使用 JavaScript 将图像从 A 移动到 B

这是我第一次来这里,我不知道如何缩进这个抱歉:/我有一张面包车的图片,我正试图将它移过屏幕,让它看起来就像在开车一样。完成后,我将缩放图像,使其看起来好像在移动(并变小)。我需要在没有任何包(例如JQuery)的情况下使用标准javascript完成此操作。我得到的是一辆货车,由于我无法抛anchor的原因,它沿着两条路径而不是一条路径行驶。同样朝错误的方向移动(它应该沿着路径y=-25x移动,这样每向右移动25个像素它应该向上移动1个像素)。为了说明我想要实现的目标,请看这张图片:http://i.stack.imgur.com/9WIfr.jpg这是我的javascript文件:v

javascript - 动画渐变颜色 React Native

我正在尝试在ReactNative中创建一个渐变,该渐变将在应用程序打开时以一种颜色开始,然后每30秒逐渐变为另一种颜色。常规线性渐变在不尝试添加动画的情况下工作。我尝试使用插值和动画计时,如ReactNative文档中所示,但似乎没有任何效果。我的代码:importReact,{Component}from'react';import{processColor,AppRegistry,StyleSheet,Dimensions,Animated,Image,Easing,View}from'react-native';importTimerMixinfrom'react-timer-

javascript - Three.js 中的 BoxBufferGeometry 与 BoxGeometry 有什么区别?

我正在学习Three.js。我找不到关于BoxBufferGeometry与BoxGeometry之间区别的正确答案。帮助我。 最佳答案 [Primitive]Geometry类是操作友好的,内存不友好的所有JS几何类。这意味着定义此几何的每条数据都存储为某个类的实例(Vector3、Vector2、Face3)等等。这些都带有方便的方法,所以你可以用一些其他向量点一个顶点,平移顶点,修改uv,修改法线等等。但它在内存和性能方面有开销(创建所有这些实例,存储它们)。[Primitive]BufferGeometry类是性能友好的几何

javascript - 如何在不使用 css 转换的情况下将 jQuery animate 与 css3 属性结合起来?

在这个例子中;我正在尝试使用css3旋转属性创建一个jQuery动画。我可以用css3transition和jQuerycss()来管理这个动画,但我想用jQueryanimate()来根据旋转deg值来做这个到我的jQuery变体。是否可以在jQuery1.8.0中使用带有css3属性值的动画?HereisjsFiddletoinspect.jQuery:varrotateVal=90;//thismethodisn'tworking$('.red').animate({'transform':'rotate('+rotateVal+'deg)'},500);//thiswaywor

javascript - 动画高度自动存储高度 - slideUp with velocity.js

我正在尝试制作一个类似于slideToggle()方法的滑动切换淡入淡出动画,但使用了velocity.js-希望它会更流畅。因为我无法滚动到自动-我将高度放在变量中并使用它来设置高度动画。我遇到的问题是高度值只存储一次,如果页面稍微调整大小,那么这个数字就不再正确了。-另外-因为该区域在页面加载时隐藏,(在它获得初始高度之后)我无法再次检查高度(如果发生窗口大小调整)最后我想把它放到一个函数中,所以保持与它相关的关键。此外,如果您还没有使用过velocity.js,它基本上就像.animate()-所以它并不是问题的一部分。HTMLToggle{{content}}CloseCSS.

javascript - Angular.js 动画

我有一个包含ng-repeat的block,它的定义如下:...目前,我可以通过单击某些元素在这些block之间切换。正如您可能已经猜到的那样,它通过ng-show="isPageSelected(item.page)"工作。一切正常,但它们会立即切换,我想添加一个动画,一个简单的淡入/淡出就可以了。因此,不再选择的block应该淡出,当它消失时,新block应该淡入。当我使用ngAnimate时,它们会同时淡入和淡出。我需要第一个block完全消失并用display:none;隐藏,完成后下一个block应该出现并淡入。使用jQuery时这是一个相当简单的任务,但我该怎么做优雅地使用