css Bootstrap崩溃具有跳跃性过渡

rslzwgfq 于 2022-11-19 发布在 Bootstrap

关注(0)|答案(3)|浏览(160)

引导程序导航栏的过渡有问题。当折叠元素有填充时，折叠过渡跳跃。
我在谷歌上搜索了这个问题，似乎问题出在填充上：

.menu-menu-container{
    padding: 100px 30px 60px 30px;
    background-color: yellow;
}

事实上，如果我从menu-menu-container元素中删除填充，动画效果会很好，而且非常平滑
这是我的密码本：http://codepen.io/mp1985/pen/EyOJYE
我怎么能达到同样的结果没有这个奇怪的问题？

css

来源：https://stackoverflow.com/questions/38857162/bootstrap-collapse-has-a-jumpy-transition

3条答案

按热度按时间

zphenhs41#

问题是由正在折叠的容器的填充引起的。它使collapse.js计算高度变得复杂
示例：
HTML语言

<div class="collapsible-div padding-values">
      // YOUR CONTENT
    </div>

CSS

.padding-values{
   padding: 20px 40px 30px;
}

如果您将填充移动到内部容器，此问题将得到修复：
HTML语言

<div class="collapsible-div">
  <div class="new-container padding-values">
    // YOUR CONTENT
  </div>
</div>

赞(0）回复(0）举报 2022-11-19

8fq7wneg2#

这是因为navbar-collapse类的最大高度为340 px，请使用以下代码来处理它。http://codepen.io/rahulchaturvedie/pen/VjVOLa

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: none;
}

赞(0）回复(0）举报 2022-11-19

pgvzfuti3#

尝试在受影响的项目上添加CSS过渡。这将使过渡的跳转更少，因为浏览器将在不同的填充之间进行动画。您可以将每个CSS可动画属性与它们自己的定时属性相关联。您可以在此处查看所有可动画属性：http://www.w3schools.com/cssref/css_animatable.asp

// will want to make this selector more targeted/meaningful
* {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

赞(0）回复(0）举报 2022-11-19

我来回答

css Bootstrap崩溃具有跳跃性过渡

3条答案

相关问题

热门标签

最新问答