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

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. oracle-day1

    今天的学习内容是oracle产品的三种安装方式,还有使用dbca静默建库 oracle产品的三种安装方式分别为: 1.图形化(Java向导)安装引导 2.使用应答文件静默安装 3.直接将装好的orac ...

  2. 在Windows .NET平台下使用Memcached

    网上关于Memcached的文章很多,但据我观察,大多是互相转载或者抄袭的,千篇一律.有些则是直接整理的一些超链接然后贴出来.那些超链接笔者大概都进去看了,其实关于Memcached的中文的技术文章, ...

  3. iOS开发中的错误整理，再一次整理通过通知中心来处理键盘,一定记得最后关闭通知中心

    一.打开通知中心,监听键盘的显示与隐藏 二.最后记得将监听通知的对象移除

  4. Linux_Shell_Bash快捷键

      来自为知笔记(Wiz)

  5. AOP 注入失败的问题

    启用了AOP 后,报这样的类似错误: Error creating bean with name 'bpmpSysUserService': Injection of autowired depend ...

  6. java-byte[]图片在页面展示

    public void img(HttpServletRequest req, HttpServletResponse res) { //res.setHeader("Content-Typ ...

  7. 【POJ 2480】Longge's problem（欧拉函数）

    题意 求$ \sum_{i=1}^n gcd(i,n) $ 给定 $n(1\le n\le 2^{32}) $. 链接 题解 欧拉函数 $φ(x)$ :1到x-1有几个和x互质的数. gcd(i,n) ...

  8. Redis的事务

    Redis对事务的支持是部分支持,不想oracle,要么都成功要么都失败,Redis可以部分成功部分失败 1 是什么: 可以一次执行多个命令,本质是一组命令的集合.一个事务中的所有命令都会序列化,按顺 ...

  9. 【codevs1086】 栈

    http://codevs.cn/problem/1086/ (题目链接) 题意 给出1~n总共n个数,对它们进行入栈出栈操作,问一共有多少种不同的方案. Solution 找规律手玩前5个1 2 5 ...

  10. 【poj1186】 方程的解数

    http://poj.org/problem?id=1186 (题目链接) 题意 已知一个n元高次方程:   其中:x1, x2,…,xn是未知数,k1,k2,…,kn是系数,p1,p2,…pn是指数 ...