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

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 属性背后的原因和差异很重要:

Transform

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

Transition

[...] It allows to define the transition between two states of an element.

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

Example Fiddle