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

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. Shell脚本编程中的几个问题

    条件语句 正确的写法: if [ $1 = "-f" ] #注意这里,前后方括号和中间的内容之间必须有空格! then commands fi 错误的写法: if [$1 == & ...

  2. [Google Guava]学习--新集合类型Multimap

    每个有经验的Java程序员都在某处实现过Map<K, List<V>>或Map<K, Set<V>>,并且要忍受这个结构的笨拙. 假如目前有个需求是给两 ...

  3. 将Extjs文件拷入eclipse工程下卡死问题

    主要是由于eclipse默认对js文件进行校验,ExtJS中js文件多且庞大造成电脑资源耗尽. 解决方法: 找到工作空间中项目文件夹下的.project文件,将 <buildCommand> ...

  4. [转]设计模式之六大原则——开闭原则（OCP）

    原文地址:http://www.cnblogs.com/muzongyan/archive/2010/08/05/1793454.html 开闭原则(Open Closed Principle)是Ja ...

  5. 【BZOJ 4269】再见Xor

    zky学长提供的线性基求法: for(int i=1;i<=n;i++) for(int j=64;j>=1;j--) { if(a[i]>>(j-1)&1) { if ...

  6. 三、基础功能模块，用户类别管理——锁、EF并发处理、领域服务、应用服务的划分

    在上一章节中,我们处理了MVC多级目录问题,参见<二.处理MVC多级目录问题——以ABP为基础架构的一个中等规模的OA开发日志>.从这章开始,我们将进入正式的开发过程.首先,我们要完成系统 ...

  7. js-比较两个日期的大小

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head ...

  8. 本篇文章： HTML DOM 对象

    HTML DOM 对象 本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法 ...

  9. 【BZOJ-1367】sequence 可并堆+中位数

    1367: [Baltic2004]sequence Time Limit: 20 Sec  Memory Limit: 64 MBSubmit: 932  Solved: 348[Submit][S ...

  10. oracle merge into 的例子

    内容来自 oracle 11g 实用教程 郑阿奇等编 在 oracle 11g中有merge语句,用于根据与原表连接的结果,对目标表执行插入,更新,或者删除操作.例如,根据在一个表中找到的差异在另一个 ...