tabbar中实现页面切换时的平滑过渡效果的兼容写法,-webkit-transform

要实现页面切换时的平滑过渡效果，可以使用CSS3的动画效果。具体的兼容写法如下：

/* 兼容写法 */
.tabbar-item {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* 切换到选中状态的样式 */
.tabbar-item-active {
  /* 兼容写法 */
  -webkit-transform: translate3d(0, -2px, 0);
  transform: translate3d(0, -2px, 0);
}

其中，`.tabbar-item` 表示 tabbar 的每个选项，`.tabbar-item-active` 表示当前选中的选项，`-webkit-transition` 和 `transition` 分别表示动画过渡的属性和时间，`-webkit-transform` 和 `transform` 表示元素的平移变换，`translate3d` 中的参数分别表示 x、y、z 轴的平移距离。通过设置参数，可以实现不同的平移效果。

需要注意的是，`-webkit-` 前缀是为了兼容旧版本的浏览器，现代浏览器已经支持不带前缀的写法。