jjzjj

animation

全部标签

javascript - Polymer core-animated-pages 默认页面

我正在使用Polymercore-animated-pages在我的网站主页之间切换。我通过的id来选择需要显示的页面.您可以查看实际示例here.现在,我遇到的问题是在加载页面时,应该选择的页面是从url加载的,例如www.example.com/home显示主页,www.example.com/activities显示事件页面(示例中省略的代码,因为不是很相关)。但是链接提供的id不存在怎么办?是否有显示默认值的选项core-animated-pages-带有404消息的页面?或者我是否必须检查每个链接是否在我所有页面的数组中,如果是,则手动加载错误页面并显示正确的页面?同样,这里

javascript - ngRepeat with ngAnimate 在我的元素上设置 "data-ng-animate= 2"

我不知道为什么ngRepeat在我的元素上添加了data-ng-animate=2属性。为什么会这样?我这样写:我明白了:谢谢! 最佳答案 正如您在thesourcecodehere中看到的那样data-ng-animate属性用于跟踪动画的状态:varPRE_DIGEST_STATE=1;varRUNNING_STATE=2;所以基本上它只是在元素本身上存储它自己的动画状态。在您的情况下(2)它正在运行。如果您跟随NG_ANIMATE_ATTR_NAME浏览该文件,您可以跟随它添加、更新和最终从元素中删除。

javascript - 如何使用 jQuery 在 DIV 中连续滚动内容?

瞄准目标是拥有一个具有固定高度和宽度的容器DIV,并使该DIV中的HTML内容自动连续垂直滚动。问题基本上我创建了下面的代码,使用jQuery垂直向上滚动(移动)子DIV,直到它在边界父框之外,然后动画完成,这会触发一个事件处理程序,该事件处理程序重置子DIV的位置并再次启动该过程.这很好用,所以内容向上滚动留下空白,然后再次从底部开始向上滚动。我遇到的问题是,对此的要求是让内容看起来好像在不断重复,请参见下图以更好地解释这一点,有没有办法做到这一点?(除了jQuery,我不想使用第三方插件或库):(来源:cameroncooke.com)到目前为止我有什么HTML:Thisisati

javascript - 如何实现像jQuery 的slideDown 一样的向下滑动效果,但只使用CSS?

CSS3动画有问题。它们不支持“自动”高度属性(以及宽度、边距等)。在不知道元素确切高度的情况下创建CSS3向下滑动动画的最佳方法是什么?问题类似于this一个,但是那里接受的答案没有回答实际问题,因为它们没有处理计算您希望滑动的元素的高度的问题。 最佳答案 你看过我根据那个答案挖出来的这个演示吗?我尝试自己编写,但似乎没有用。$('#click-me').click(function(){varheight=$("#this").height();if(height>0){$('#this').css('height','0');

javascript - 如何使用 jquery(不使用插件)创建一个简单的 slider ?

varimg=function(){$("#slider").animate({"left":"-=1775px"},10000,function(){$("#slider").animate({"left":"0px"},10000);img();});};img();我在jquery中使用了动画属性,但我希望循环连续显示三个图像。 最佳答案 我曾经创建了一个执行此操作的小js插件,您可以在此处查看代码:$.fn.luckyCarousel=function(options){varcar=this;varsettings=$.e

javascript - 动画等待执行

我正在尝试使用CSS为元素高度设置动画。我这样做的方式是,我向一个元素添加了一个触摸事件。该函数将className添加到应该隐藏的元素,即高度为0。问题是,当元素被点击时,本应获得0高度的div暂停了一秒钟,然后获得了所需的高度。似乎动画持续时间越长,它在动画之前等待的时间就越长。相关代码如下:transition:max-height2sease-in-out;JSFiddlevarheading=document.getElementById('heading'),body=document.getElementById('body');heading.addEventListe

javascript - 使用 jQuery 的淡入/淡出动画效果

要了解我的代码,请访问此页面:请先点击包装过滤器http://codepen.io/mariomez/pen/qNrzAr?editors=0010这是一种简化的动画过滤方法。每个红框可能有多个类别作为过滤器的标识符。我使用这段代码的目标是实现一种漂亮的淡入和淡出动画方式。现在我设法做到这一点只是为了淡入。尽管我编写了淡出动画,但我无法在JS代码中正确使用它。1个过滤器的示例:我希望除“packaging”之外的所有类都能很好地淡出并让packaging类淡入。jQuery代码$(document).ready(function(){$(".filter-logo").click(fu

javascript - 多个元素上的 jQuery 动画,单个动画线程/计时器还是多个?

我想知道jQuery选择器何时返回多个元素,并且我在所有这些元素上执行了一个“slideDown”...$('.allthisclasss').slideDown();是否存在单个代码循环同步向下移动所有对象,或者jQuery是否分别处理所有对象并且它们每个都有一个执行线程来移动它们自己?我的问题是关于动画优化,如果所有对象只有一个计时器而不是每个对象一个,那就太好了。有人知道jQuery如何处理这种情况吗? 最佳答案 所有动画都会自动添加到jQuery中的全局效果队列中。但这并不意味着它们是按顺序动画的,制作一个简单的测试页面,其

javascript - 使用 JavaScript 动画化 CSS3 转换的值是否排除了硬件加速?

您可以通过设置动画持续时间并设置CSS3变换的初始值和最终值来利用硬件加速动画。如果不设置动画持续时间和使用关键帧,而是直接使用JavaScript为所需的CSS3转换值设置动画,会怎样?您是否仍会利用硬件加速,或者硬件加速已被排除? 最佳答案 除非您使用转换,否则它不会为webkit浏览器进行硬件加速。此外,只有3d变换被加速,因此确保元素在可用时使用3d渲染树的快速方法是添加:-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);顺便说一下,转换速度很

javascript - 如何使用 three.js 在两种颜色之间进行补间?

我有一个给定颜色的three.js对象。我想把它平滑地动画成另一种颜色。在动画期间,它应该只显示开始和结束之间的直接渐变。也就是说,它不应该在RGB颜色空间中线性执行补间。我什至不确定HSV空间内的线性补间是否也好看。如何在three.js对象上获得这种颜色补间? 最佳答案 我有一个在HSV空间中制作补间的版本。它并不完美,因为沿途会出现许多不同的色调。Three.js不包含从THREE.Color获取HSV值的方法。所以,添加一个:THREE.Color.prototype.getHSV=function(){varrr,gg,b