Question

我试图将Bootstrap Toggle Menu滑动效果从上到下从左到右改变。这是网站：http://concepthomes.com/

因此在尝试了很多CSS代码之后（我更喜欢使用完整的CSS来实现此效果），我发现了这个：

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}

它正在工作，但是当我点击它时，菜单在完全打开之前有“暂停时间”。

有没有办法让过渡更顺畅？

===更新=== 所以，我正在使用Jasny的Bootstrap（http://www.jasny.net/bootstrap/examples/navmenu/）

它具有名为Slide In的菜单幻灯片效果，但不幸的是它仅适用于998px以下的视口。有没有办法'破解''offcanvas-sm'可以在所有视口上使用？

Answer 1

transition-timing-function属性用于指定过渡效果的速度曲线。

ease值开始慢，然后快，然后缓慢结束，（相当于cubic-bezier（0.25,0.1,0.25,1））

尝试linear值，该值指定从开始到结束具有相同速度的过渡效果。

然后你可以改变transition-duration以使它成为你满意的时间长度。

http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

使Bootstrap切换菜单的CSS过渡平滑

1 个答案: