javascript - 可切换的侧边栏导航

Question

我正在开发一个需要可切换侧边栏导航的网站，它需要像这样工作：

目前，我将左侧导航栏设置为“位置：固定”，然后内容具有导航栏宽度的“填充左”值。然后我使用这段代码来创建过渡：

.navbar {
    width: 95px;
    -webkit-transition: width 500ms ease;
    -moz-transition: width 500ms ease;
    -o-transition: width 500ms ease;
    transition: width 500ms ease;
}

.toggle-navbar {
    width: 250px;
}

.content {
    padding-left: 95px;
    -webkit-transition: padding-left 500ms ease;
    -moz-transition: padding-left 500ms ease;
    -o-transition: padding-left 500ms ease;
    transition: padding-left 500ms ease;
}

.toggle-content {
    padding-left: 250px;
}

然后添加“切换-”类$(elem).toggleClass('toggle-class')

有一个更好的方法吗？是否可以使用 css3 过渡来实现这一点，该过渡利用硬件加速（在 iOS 设备上保持动画流畅）？