相关疑难解决方法(0)

我正在尝试<ul>使用CSS过渡进行滑动.

将<ul>在开始关闭height: 0;.悬停时,高度设置为height:auto;.然而,这导致它只是出现而不是过渡,

如果我从那里height: 40px;开始height: auto;,那么它会向上滑动height: 0;,然后突然跳到正确的高度.

如果不使用JavaScript,我怎么能这样做呢？

#child0 {
  height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
}
#parent0:hover #child0 {
  height: auto;
}
#child40 {
  height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: height 1s ease;
  -webkit-transition: height 1s ease;
  -o-transition: height 1s ease;
  transition: height 1s ease;
} …

Twitter Bootstrap的按钮有一个很好的Loading...状态.

问题是它只是显示像这样Loading...传递data-loading-text属性的消息:

<button type="button" class="btn btn-primary start" id="btnStartUploads"
        data-loading-text="@Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

看看Font Awesome,你会看到现在有一​​个动画微调器图标.

我尝试在触发这样的Upload操作时集成该微调器图标:

$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');

但这根本没有效果,也就是说,我只看到Uploading...按钮上的文字.

按钮处于加载状态时是否可以添加图标？看起来不知何故Bootstrap只是<i class="icon-upload icon-large"></i>在处于加载状态时删除按钮内的图标.

这是一个简单的演示,显示了我上面描述的行为.当你看到它进入加载状态时,图标就会消失.它会在时间间隔后重新出现.

你能用CSS3从height:0过渡到内容的可变高度吗？