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

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. 50ms延时程序

    12MHz晶振 一个机器周期2us, DEL:  MOV  R7,#200D DEL1: MOV R6,#125 DEL2: DJNZ R6,DEL2 ;125*2=250us DJNZ  R7,DE ...

  2. ESPCMS基本导航操作

    Espcms和dedecms一样,是用来建企业站的cms程序,功能强大,稳定,可以帮助您快速.便捷地新建一个企业网站.无忧主机向您推荐无忧主机php虚拟主机. 我们可以通过espcms设置来去掉比如购 ...

  3. servlet注解@PostConstruct与@PreDestroy

    从Java EE 5规范开始,Servlet中增加了两个影响Servlet生命周期的注解(Annotion):@PostConstruct和@PreDestroy.这两个注解被用来修饰一个非静态的vo ...

  4. mysql数据库默认存放位置修改

    windows:   方式一 使用符号连接 假设你的mysql安装在c:\mysql,数据目录就是c:\mysql\data 现在你想在D 盘建立一个名为foo的数据库,路径为d:\data\foo. ...

  5. javascript中数组去重的4种方法

    面试前端必须准备的一道问题:怎样去掉Javascript的Array的重复项.在最近面试中,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但其实暗藏杀机. 考的不仅仅是实现这个功能,更 ...

  6. Thinking in java学习笔记之垃圾回收器如何工作

    垃圾回收器使得java在堆上分配空间的速度可以和其他语言从堆栈上分配空间的速度媲美.

  7. 【BZOJ-3725】Matryca 乱搞

    3725: PA2014 Final Matryca Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 160  Solved: 96[Submit][St ...

  8. 自动完成--autoComplete插件(2)

    远端的也可以成为本地的数据 4) lookupLimit 类型:数字 说明:本地数据显示的最大条数,服务器段的没有效果,服务器端的可以后台设置 默认:没有限制 5) lookupFilter 类型: ...

  9. JSP_通过表格显示数据库的信息

    在本篇文章中,小编将介绍在jsp页面中通过表格显示数据库的实现:下面我们以“新闻发布系统”中显示一级标题的信息为例进行讲述,在新闻发布系统中存在一二级标题,在后台可以对标题进行管理,可查询标题等信息 ...

  10. Akka: actor应用的一些小结

    1.消息: 1) case class是scala中一个不可变对象(当然你可以让他成为可变的),通过不可变对象来进行消息传递可以更加明确内容,也能保证线程安全 2) 在Java中如果你将class对象 ...