Atitti  css
  transition Animation differ区别

 

1.1.
transition底助益在简单容易用,但是它产生几乎只特别可怜之受制。  1

1.2.
Transition是足以自行触发的动timeout1

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

1.4.
Velocity 和 GSAP
2

 

 

1.1. transition底助益在简单容易用,但是其发生几乎个老非常之受制。 

 (2)transition是一次性的,不能够还发生,除非一再触发。 
(3)transition只能定义开始状态和结束状态,不克定义中间状态,也就是说只有个别只状态。 
(4)一长达transition规则,只能定义一个性质的别,不可知涉及多只属性。 
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);

 

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%{}
100%{transform:rotateZ(0deg);top:10%;left:30%;width:400px}}”,6);//写副样式

 

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 阿提拉克斯 阿克巴 阿尔 拉帕努伊 ) 

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

转载请注明来源: http://www.cnblogs.com/attilax/

Atiend

 

 

相关文章

网站地图xml地图