zoukankan      html  css  js  c++  java
  • Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别

     

    1.1. transition的优点在于简单易用,但是它有几个很大的局限。  1

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

    1.3. Velocity 和 GSAP2

     

     

    1.1. transition的优点在于简单易用,但是它有几个很大的局限。 

    1)transition需要事件触发,所以没法在网页加载时自动发生。 
    2)transition是一次性的,不能重复发生,除非一再触发。 
    3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。 
    4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。 
    CSS Animation就是为了解决这些问题而提出的。

     

    1.2. 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%;400px}}",6);//写入样式

     

    keyframes之所以是复数,就是因为它里面还包含很多子样式keyframe
    keyframe相当于普通CSS样式的rule,所以keyframe对象才有 style 属性,可以用来进行修改

     

    1.3. Velocity 和 GSAP  jQuery anim.

     

      两个最常用的javascript动画库是 Velocity.js 和 GSAP。这些库在使用jQuery的时候并没有性能损耗,因为它们都没有使用jQuery的动画栈。

     这样来处理动画就不会存在性能上的浪费。你会发现它javascript的性能真的和CSS差不多,而且操作更方便。

     

     但事实是基于javascript的动画效果通常和基于css的动画一样快,有些甚至更快一些。CSS动画通常被觉得比较快,因为我们总是拿它和jQuery动画相比,其实慢的是jQuery的$.animate(),然而javascript的动画库避免了DOM操作,常常比jQuery快20倍左右。

     

     

    Jqa 比较好的anim库了...检索累挂在的库,新不上啊...

    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://blog.csdn.net/attilax

    Atiend

     

     

  • 相关阅读:
    Thinking in Java Reading Note(9.接口)
    Thinking in java Reading Note(8.多态)
    Thinking in Java Reading Note(7.复用类)
    SQL必知必会
    Thinking in Java Reading Note(5.初始化与清理)
    Thinking in Java Reading Note(2.一切都是对象)
    鸟哥的Linux私房菜笔记(1.基础)
    Thinking in Java Reading Note(1.对象导论)
    CoreJava2 Reading Note(2:I/O)
    CoreJava2 Reading Note(1:Stream)
  • 原文地址:https://www.cnblogs.com/attilax/p/15198399.html
Copyright © 2011-2022 走看看