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

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. Android其它新控件 （转）

    原文出处:http://blog.csdn.net/lavor_zl/article/details/51312715 Android其它新控件是指非Android大版本更新时提出的新控件,也非谷歌I ...

  2. Android Material Design 控件常用的属性

    android:fitsSystemWindows="true" 是一个boolean值的内部属性,让view可以根据系统窗口(如status bar)来调整自己的布局,如果值为t ...

  3. [转]servlet中的service, doGet, doPost方法的区别和联系

    原文地址:http://m.blog.csdn.net/blog/ghyg525/22928567 大家都知道在javax.servlet.Servlet接口中只有init, service, des ...

  4. SELinux关闭和开启

    检测Selinux状态 ./usr/sbin/sestatus -v ##如果SELinux status参数为enabled即为开启状态 SELinux status: enabled .geten ...

  5. 由多线程引起的map取值为null的分析

    昨天写了一个多线程的程序,却发现了一个很奇特的问题,就是我的map对象明明put了,可是get的时候竟然会取到null,而且尝试多次,有时候成功,有时候取到null,并不确定. 程序代码如下: pub ...

  6. Java实现本地 fileCopy

    前言: Java中流是重要的内容,基础的文件读写与拷贝知识点是很多面试的考点.故通过本文进行简单测试总结. 2.图展示[文本IO/二进制IO](这是参考自网上的一张总结图,相当经典,方便对比记忆) 3 ...

  7. Leetcode 367. Valid Perfect Square

    Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...

  8. 关于AWR报告命中率指标的解释(转)

    文章转自:http://blog.itpub.net/24558279/viewspace-762371/ 从Oracle 10g开始,Oracle给广大DBA提供了一个性能优化的利器,那便是Auto ...

  9. ubuntu安装搜狗输入法

    搜狗官网上说14.04直接安装deb包就行,无需配置. 但是经实践发现仍然需要配置一下== 命令: ibm@IBM:~$ sudo dpkg --get-selections | grep fcitx ...

  10. [NOIP2015] 提高组 洛谷P2661 信息传递

    题目描述 有n个同学(编号为1到n)正在玩一个信息传递的游戏.在游戏里每人都有一个固定的信息传递对象,其中,编号为i的同学的信息传递对象是编号为Ti同学. 游戏开始时,每人都只知道自己的生日.之后每一 ...