Atitti  css
  transition Animation differ区别

 

一.1.
transition的亮点在于简单易用,可是它有多少个一点都不小的受制。  一

一.贰.
Transition是足以自行触发的行使timeout一

壹.三.
js 动态改变 style 内容 ,样式覆盖 二

1.4.
Velocity 和 GSAP
2

 

 

一.1. transition的独到之处在于容易易用,可是它有多少个一点都不小的局限。 

 (2)transition是一遍性的,不能再度产生,除非一再触发。 
(三)transition只好定义伊始情况和终结状态,不可能定义中间状态,相当于说唯有多少个情景。 
(四)一条transition规则,只好定义3本性质的变化,无法涉及多个属性。 
CSS
Animation正是为着消除这么些题材而提议的。

1.2. Transition是可以自行触发的选择timeout

 

<script>

window.setTimeout(function()

{

console.log(“–add
cls”);

$(“#u”).addClass(“big”);

},500);

window.setTimeout(function()

{

console.log(“–add
cls2”);

 $(“#r”).addClass(“big2”);

},1000);

jQuery, 

1.3. js 动态改变 style 内容 ,样式覆盖

  var
style = document.getElementById(“dynamic”)

    style.innerHTML
= ‘@-webkit-keyframes myfirst{50% {background: ‘+color+’;} }\n’

             +
‘@keyframes myfirst {50% {background: ‘+color+’;}}’

 

var tt=document.styleSheets[0];

tt.deleteRule(6);//清除从前写入的动画片样式console.log(tt);

tt.insertRule(“@keyframes
mymove{0%{}
百分百{transform:rotateZ(0deg);top:10%;left:十分之三;width:400px}}”,陆);//写入样式

 

keyframes之所以是复数,就是因为它里面还包蕴很多子样式keyframe
keyframe也正是平常CSS样式的rule,所以keyframe对象才有 style 属性,能够用来进行修改

 

1.4. Velocity 和 GSAP

 

  多个最常用的javascript动画库是
Velocity.js 和
GSAP。那几个库在动用jQuery的时候并从未品质损耗,因为它们都未曾选取jQuery的动画栈。

 那样来拍卖动画就不会设有品质上的荒废。你会意识它javascript的习性真的和CSS大致,而且操作更便于。

 

 但事实是基于javascript的卡通效果壹般和基于css的动画壹样快,有个别照旧更加快一些。CSS动画平日被认为相比较快,因为我们连年拿它和jQuery动画比较,其实慢的是jQuery的$.animate(),然则javascript的动画库幸免了DOM操作,平日比jQuery快20倍左右。

 

 

 

【CSS3】transition过渡和animation动画

  • 季诗筱的博客 – 博客频道 – CSDN.NET.html

javascript

  • js怎么着动态修改@keyframes相关值? – SegmentFault.html

css –
JavaScript怎么修改@keyframes – SegmentFault.html

吐弃选取jQuery完毕动画 –
A5创业网.html

 

 

作者:: 绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 Ake巴 阿尔 拉帕努伊 ) 

汉字名:艾提拉(艾龙),   EMAIL:1466519819@qq.com

转发请注解来源: http://www.cnblogs.com/attilax/

Atiend

 

 

相关文章

网站地图xml地图