没有

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

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

Transition

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

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

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

1 个答案:

没有

Example Fiddle