-
transition取值： <' transition-property '>：检索或设置对象中的参与过渡的属性，默认为all <' transition-duration '>：检索或设置对象过渡的持续时间 <' transition-timing-function '>：检索或设置对象中过渡的动画类型 <' transition-delay '>：检索或设置对象延迟过渡的时间查看全部
-
很6 我要学习查看全部
-
要用到then之前呢，必定会有个deferred的返回值，然后再then，如果then里面有return，则就是链式调用，如果没有return，就是同时执行； 再看回这个例子， 第一个暂停没有return，说明这个暂停动画和后面的开门动画是同时执行的； 第二个开门有return，说明这个开门动画执行完毕之后再去执行开灯动画； 第三个开灯没有return，说明这个开灯动画和后面的进商店动画同时执行； 如此类推查看全部
-
页面的横向布局我们已经实现好了，那么如何实现页面与页面之间的切换呢？ 一般来说要根据布局的结构来，大体有2种： 移动父容器，改变父容器的坐标 移动每一个子容器的坐标 显而易见，移动父容器简单很多，只需要改变父容器X轴的坐标就可以了。如果父容器中子元素有很多的话，那么我们会考虑第二种算法，可以做成动态加载，但是这种处理是超级麻烦，这里不讨论 改变坐标的处理可以分为2种： 传统的top,left坐标修改 CSS3中的transform属性 传统的就是修改元素style是坐标属性，这个没什么好说的，使用简单，一般都需要配合定时器使用。 CSS3引入了一个新的属性Transform transform 属性向元素应用 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，也就是启动GPU来处理，性能更强 过去，为了实现这种平滑的过渡效果，我们需要借助于Flash技术，现在只需要简单的使用CSS3 Transition的方法就可以实现，这是一个简单的动画属性 transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等，具体大家可以搜索更细致的资料 这里需要特别注意的就是： transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程 简单的一句话描述就是 通过设置transition的一些参数，让translate3d这个属性发生变化 如何通过translate结合transition改变元素的页面位置，我们具体看到右边的代码 通过点击"点击页面开始切换"出现页面切换的效果查看全部
-
封装，即隐藏对象的属性和实现细节，仅对外公开接口。 封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员 这个主题案例，我采用的是面向接口编程的写法，简单的说就是将行为封装分布在各个对象中，并让这些对象自己各自负责自己的行为，这也是面向对象设计的一个优点 就拿页面切换的效果来说，在某一时刻，元素A需要让页面进行切换，那么元素A不需要关心页面是怎么切换的，它只能要调用到一个接口方法能让页面切换就行了 基于这样的理论，我们就开始改造一下页面切换的零碎的代码块 页面布局与切换是一个整体，我们想调用切换的时候，并不关心其内部处理的手段，所以我们只需要提供一个可以调用的接口就可以，新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口 JavaScript中没有抽象类与接口的支持，所以很大程度上实现封装都是靠闭包去模拟 具体我看看右边代码块Swipe.js的实现 与index.html中调用查看全部
-
情人节动画查看全部
-
jhjjk查看全部
-
11查看全部
-
调用$.Deferre对象方法后，必须return获得$.Deferre的状态查看全部
-
此处无需定义transition-property,为什么？查看全部
-
css 动画。@keyframes规则, animation属性,step()函数查看全部
-
通过二者的速率变化，可以让用户产生一个视觉上的错觉，也可以称为视觉差，感觉就是人物在不断走路前行查看全部
-
.slowWalk { /* 填入动画样式规则 */ animation-name: person-slow; animation-duration:950ms; animation-iteration-count:infinite; animation-timing-function:steps(1,start) } /* 普通慢走 */ @keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } }查看全部
-
element.animate({ marginLeft:-2*width }, 5000,'linear');查看全部
-
wewr查看全部
举报
0/150
提交
取消