我以前始终都把他搞反，或者是混淆。现在可以稍微小结下。

Transition:CSS3中处理动画的一个样式；只涉及动画起始和终止两个状态。如果涉及到一个动画的各个时间或者状态，那就必须要用到的另外一个样式：Animate。

Transition有四个过渡属性：

transition-property   /*指定动画执行的样式变化*/

transition-duration   /*动画需要执行的时间*/

transition-timing-function /*平滑过渡的函数：*/

transition-delay  /*延迟多长时间开始动画*/　

transition-property指定样式变化，如果涉及到元素的位移、旋转、形变、缩小/放大就需要用到Transform属性：

transform:scale(sx,sy);
transform:translate(0px,9px);

transform:rotate(a);

transform:skew(ax,ay);

transform:matrix(a,b,c,d,e,f)

其中martix比较复杂，它可以包含旋转、形变、缩小/放大三者，其实transform的原理是计算机图形学中的2D矩阵变换。

参考：http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html，transition-timing-function需要用到贝塞尔曲线，

首先需要知道几个简单常量：linear ease ease-in ease-out ease-in-out。进一步精化就需要知道什么是贝塞尔曲线。可以参考：

http://www.zhangxinxu.com/wordpress/2013/08/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF-cubic-bezier-css3%E5%8A%A8%E7%94%BB-svg-canvas/,来看一个JS操作transition的例子：

<body class="layout-scroll">

    <div id="test"style="background-color: red;width:200px;height: 100px;top:10px;left:10px;position:relative">

        <a href="#nolink" id="click" style="bottom: -22px; text-align: center; position:absolute">点击</a>

    </div>

    <script type="text/javascript">

        var circular = {

            style: 'cubic-bezier(0.1, 0.57, 0.1, 1)',   // Not properly "circular" but this looks better, it should be (0.075, 0.82, 0.165, 1)

            fn: function (k) {

                return Math.sqrt( 1 - ( --k * k ) );

            }

        };

        $('#click').click(function(){

           var transformStyle = $('#test')[0].style;

           transformStyle["webkitTransitionDuration"] = 0 + 's';

           transformStyle["webkitTransitionTimingFunction"] = circular.style;

           transformStyle["webkitTransform"] = 'translate(' + 700 + 'px,' + 0 + 'px)'

        });

        //transitionDuration为0的情况下，不触发TransitionEnd事件

        $('#test').on('webkitTransitionEnd',function(){

            alert('game over')

        },false);

    </script>

</body>

来看一个例子，该例子是点击右边的箭头，会撑开下面的文本，箭头会变成向右。撑开的过程采用transition，在transition结束之后，箭头变化！

代码如下：

/*

.mgf-content-list li p {

     overflow: hidden;   //内容溢出元素框时隐藏。

}

*/

$('ul li h2 .mgf-icon').on('tap',function(){

    var transFormDom = $(this).closest('li').find('p')[0];

    var transFormStyle = transFormDom.style;

    if(transFormStyle.height == '0px') {

        transFormStyle.height = $(transFormDom).attr("height")+ 'px';

    }else{

        transFormStyle.height = 0;

    }

    transFormStyle.transition = 'height 0.5s linear';

  });

  //动画结束之后，箭头样式变化。

  $('ul li p').on('webkitTransitionEnd',function(){

     var Z_dom = $(this).parent('li').find('span');

     if(Z_dom.hasClass('mgf-icon-chevron-down')){

        Z_dom.removeClass('mgf-icon-chevron-down').addClass('mgf-icon-chevron-right');

     }else {

        Z_dom.removeClass('mgf-icon-chevron-right').addClass('mgf-icon-chevron-down');

     }

  });

   //页面初始化，先获取p区域的高度。然后把该区域的高度设置为0，

   //可以隐藏p区域

   $('.mgf-content-list li p').forEach(function(item,index){

      $(item).attr("height",$(item).height());

      item.style.height = 0;

   })

css3 中的transition和transform的更多相关文章

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. CSS3中的变形处理(transform)属性

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.扭曲.缩放.位移.矩阵.原点这六种类型的变形处理,下面将详细讲解transform的使用. 变形--旋转 rotate() div. ...

  3. 在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  4. css3中的变形（transform）、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  5. CSS3中的transition

    W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦点,被点击或对元素任何改变中触发, ...

  6. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  7. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  8. CSS3的transition和transform

    CSS3中的transition和transform是制作HTML5动画一定要使用到的两个属性. 注:这篇文章不考虑兼容性,只讨论webkit核心的浏览器.所以本文的所有例子请用chrome,safa ...

  9. CSS3特效之转化（transform）和过渡（transition）

    CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...

随机推荐

  1. ubuntu完全卸载nginx

    删除nginx连带配置文件 sudo apt-get purge nginx # Removes everything. 卸载不再需要的nginx依赖程序 sudo apt-get autoremov ...

  2. iOS开发中的错误整理，iOS9之后的UIWindow(TopWindow)以及UIWindow与statusBar的关系

    iOS9之后的UIWindow的问题(TopWindow),以及UIWindow与statusBar之间的联系 1.出现的问题 iOS9之后UIWindow必须要指定一个根控制器,不然会报错!iOS9 ...

  3. SVN_限制注释长度

      一.说明 svn服务器上每个项目都会有单独一个文件夹,文件夹下有一个hooks文件夹,可以在pre-commit添加内容限制注释输入 项目t1的下的hooks文件夹   二.操作步骤 注意:修改的 ...

  4. 【BZOJ 2118】墨墨的等式

    http://www.lydsy.com/JudgeOnline/problem.php?id=2118 最短路就是为了找到最小的$x$满足$x=k×a_{min}+d,0≤d<a_{min}$ ...

  5. 【HDU 2089】不要62

    http://acm.hdu.edu.cn/showproblem.php?pid=2089 数位dp,参照了打野的博客 预处理出f数组,f[i][j]表示第i位为数字j时的可行的数字总数. 对于区间 ...

  6. 状态压缩codeforces 11 D

    n个点m条边 m条边 求有几个环; #pragma comment(linker, "/STACK:102400000,102400000") #include <iostr ...

  7. URI 中特殊字符处理

    一.问题阐述 今天写 url 请求时,不管是get 请求还是 post 请求,如果参数中带有 + % # 等特殊符号,就无法正常获得参数 具体现象就是 用URL传参数的时候,用&符号连接,如果 ...

  8. mysql-模拟全连接处理

    方案:通过union连接查询出所有需要的特殊标签,然后在通过left join与union中的结果集做多表比较. sql select t.`code`,a.`count` as count_a,b. ...

  9. 【HDU 5810多校】Balls and Boxes（打表/数学）

    1.打表找规律,下面是打表程序: #include <iostream> #include <cstdio> #define ll long long #define N 10 ...

  10. JSP隐含变量和Spring中Model在EL表达式中的读取顺序

    偶然中存在着必然,必然中存在着偶然 偶然出现的bug,必然存是由代码的不合理甚至错误的 代码逻辑越长,越复杂,就越容易出现bug 之前项目里几次偶然出现了一个bug,简单的描述就是第一次新增了之后进行 ...