transition讲解

最新推荐文章于 2024-08-13 14:54:57 发布

aaouvi0202

最新推荐文章于 2024-08-13 14:54:57 发布

阅读量152

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/liuyinlei/p/4859067.html

版权

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

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;
   })

转载于:https://www.cnblogs.com/liuyinlei/p/4859067.html

aaouvi0202

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
transition讲解

我以前始终都把他搞反，或者是混淆。现在可以稍微小结下。Transition:CSS3中处理动画的一个样式；只涉及动画起始和终止两个状态。如果涉及到一个动画的各个时间或者状态，那就必须要用到的另外一个样式：Animate。Transition有四个过渡属性：transition-property /*指定动画执行的样式变化*/transition-duration ...
复制链接

扫一扫