我正在实现一种“抽屉”式效果,当单击按钮时,抽屉从屏幕底部打开。此处示例: 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转换而不是转换来实现相同的效果?我正在努力确保抽屉的打开尽可能的顺畅和无噪音。