将转换转换为转换以获得更好的性能

Question

我正在实现一个“抽屉”类型的效果，当一个按钮被点击时，抽屉从屏幕底部打开。这里的例子：http://jsfiddle.net/jYcSF/

我正在使用CSS翻译来完成以下工作：

.drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background: #333;
    height: 5px;
    width: 100%;
    -webkit-transition: height .25s linear;
    -moz-transition: height .25s linear;
    transition: height .25s linear;
}

然后，当单击按钮时，我使用jQuery在抽屉中切换一个类：

  $('.drawer-open').click(function(e){
    $('.drawer').toggleClass('active');
  });
  $('.drawer-close').click(function(e){
    $('.drawer').toggleClass('active');
  });

这样，.active抽屉CSS就可以生效并将抽屉的高度动画化，并使其从屏幕底部打开：

.drawer.active {
    height: 80%;
}

是否有可能使用CSS转换而不是转换来达到同样的效果？我试着确保抽屉的开口尽可能的光滑和整洁。

Answer 1

简单回答..。

不是

了解这些CS属性背后的原因和差异是非常重要的：

转换

CSS transform属性允许您修改CSS可视格式模型的坐标空间。使用它，可以根据值集转换、旋转、缩放和倾斜元素。

过渡

..。它允许定义元素的两种状态之间的转换。

在这种情况下，转换不是一个合适的解决方案，因为您修改的是属性(高度)，而不是3d空间中元素的坐标表示。如果要使用transform --您能做的最近的是scaleY并给它一个粗略的值--您还需要将原点设置为100%的y值--但是您会注意到，尽管元素会增长，但它的内容将被拉伸，因为您已经在3d平面上转换了它，而不是从属性的角度更改它的底层定义。

示例Fiddle